const newInstance = new TuiImageEditor(someElement, {
includeUI: {
locale: localFactory(),
},
})
Cannot find declaration property for interface.So,I try to use as,and then
import ImageEditor, { IOptions } from "tui-image-editor";
const newInstance = new TuiImageEditor(someElement, {
includeUI: {
locale: localFactory() as IOptions,
},
})
This is OK.Is there any other way???
Related
I want esbuild to automatically handle the duplicate imports in the file for me, and I also want to use its tree shaking capabilities to help me optimise my code and then output it to a file, I wrote the following code to try and do the above, but I could never get it right
export interface ConfigSource extends Partial<Options> {
code: string
name: string
loader: Loader
}
export interface Config {
sources: ConfigSource[]
options?: BuildOptions
}
function babelBuildWithBundle(main: ConfigSource, config: Config) {
const buildModuleRuntime: Plugin = {
name: 'buildModuleRuntime',
setup(build) {
build.onResolve({ filter: /\.\// }, (args) => {
return { path: args.path, namespace: 'localModule' }
})
build.onLoad({ filter: /\.\//, namespace: 'localModule' }, (args) => {
const source = config.sources.find(
(source) =>
source.name.replace(/\..+$/, '') === args.path.replace(/^\.\//, '')
)
const content = source?.code || ''
return {
contents: content,
loader: source?.loader || 'js',
}
})
},
}
return build(
{
stdin: {
contents: main.code,
loader: main.loader,
sourcefile: main.name,
resolveDir: path.resolve('.'),
},
bundle: true,
write: false,
format: 'esm',
outdir: 'dist',
plugins: [buildModuleRuntime],
}
)
}
const foo = `
export const Foo = FC(() => {
return <div>gyron</div>
})
`
const app = `
import { Foo } from './foo'
function App(): any {
console.log(B)
return <Foo />
}
`
const bundle = await babelBuildWithBundle(
{
loader: 'tsx',
code: app,
name: 'app.tsx',
},
{
sources: [
{
loader: 'tsx',
code: foo,
name: 'foo.tsx',
},
],
}
)
Then the only answer I got in the final output was
console.log(bundle.outputFiles[0].text)
`
// localModule:. /foo
var Foo = FC(() => {
return /* #__PURE__ */ React.createElement("div", null, "gyron");
});
`
console.log(bundle.outputFiles[1])
`
undefined
`
I have just tried setting treeShaking to false and can pack the app into the product.
I migrated my Expo SDK 43 Managed Workflow project to an EAS Build.
I use Google Maps as my default map choice for Android and iOS, but I when navigating to a screen with a map I receive this error:
react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps
on iOS. at node_modules/react-native-maps/lib/components/decorateMapComponent.js:27:54 in <anonymous>
When I follow the path laid out in the error to my node_modules file, it takes me to "decorateMapComponent.js" which is a js file that contains the code below.
What needs to be modified to make the EAS on iOS accept Google Maps?
Below is the code:
import PropTypes from 'prop-types';
import { requireNativeComponent, NativeModules, Platform } from 'react-native';
import { PROVIDER_DEFAULT, PROVIDER_GOOGLE } from './ProviderConstants';
export const SUPPORTED = 'SUPPORTED';
export const USES_DEFAULT_IMPLEMENTATION = 'USES_DEFAULT_IMPLEMENTATION';
export const NOT_SUPPORTED = 'NOT_SUPPORTED';
export function getAirMapName(provider) {
if (Platform.OS === 'android') {
return 'AIRMap';
}
if (provider === PROVIDER_GOOGLE) {
return 'AIRGoogleMap';
}
return 'AIRMap';
}
function getAirComponentName(provider, component) {
return `${getAirMapName(provider)}${component}`;
}
export const contextTypes = {
provider: PropTypes.string,
};
export const createNotSupportedComponent = message => () => {
console.error(message);
return null;
};
function getViewManagerConfig(viewManagerName) {
const UIManager = NativeModules.UIManager;
if (!UIManager.getViewManagerConfig) {
// RN < 0.58
return UIManager[viewManagerName];
}
// RN >= 0.58
return UIManager.getViewManagerConfig(viewManagerName);
}
export const googleMapIsInstalled = !!getViewManagerConfig(
getAirMapName(PROVIDER_GOOGLE)
);
export default function decorateMapComponent(
Component,
{ componentType, providers }
) {
const components = {};
const getDefaultComponent = () =>
requireNativeComponent(getAirComponentName(null, componentType), Component);
Component.contextTypes = contextTypes;
Component.prototype.getAirComponent = function getAirComponent() {
const provider = this.context.provider || PROVIDER_DEFAULT;
if (components[provider]) {
return components[provider];
}
if (provider === PROVIDER_DEFAULT) {
components[PROVIDER_DEFAULT] = getDefaultComponent();
return components[PROVIDER_DEFAULT];
}
const providerInfo = providers[provider];
const platformSupport = providerInfo[Platform.OS];
const componentName = getAirComponentName(provider, componentType);
if (platformSupport === NOT_SUPPORTED) {
components[provider] = createNotSupportedComponent(
`react-native-maps: ${componentName} is not supported on ${Platform.OS}`
);
} else if (platformSupport === SUPPORTED) {
if (
provider !== PROVIDER_GOOGLE ||
(Platform.OS === 'ios' && googleMapIsInstalled)
) {
components[provider] = requireNativeComponent(componentName, Component);
}
} else {
// (platformSupport === USES_DEFAULT_IMPLEMENTATION)
if (!components[PROVIDER_DEFAULT]) {
components[PROVIDER_DEFAULT] = getDefaultComponent();
}
components[provider] = components[PROVIDER_DEFAULT];
}
return components[provider];
};
Component.prototype.getUIManagerCommand = function getUIManagerCommand(name) {
const componentName = getAirComponentName(
this.context.provider,
componentType
);
return getViewManagerConfig(componentName).Commands[name];
};
Component.prototype.getMapManagerCommand = function getMapManagerCommand(
name
) {
const airComponentName = `${getAirComponentName(
this.context.provider,
componentType
)}Manager`;
return NativeModules[airComponentName][name];
};
return Component;
}
try adding "expoCli": "4.13.0", to your eas.json like this:
"cli": {
"version": ">= 0.41.0"
},
"build": {
"base": {
"expoCli": "4.13.0",
},
"simulator": {
"extends": "base",
"android": {
"buildType": "apk"
},
"ios": {
"simulator": true
}
},
"development": {
"extends": "base",
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"extends": "base",
"distribution": "internal"
},
"production": {
"extends": "base",
"releaseChannel": "production"
}
},
"submit": {
}
}
Had same issue, did work for me.
Can't get errors from resolver using react-hook-form custom resolvers. Trying to validate some fields dynamically. But if I submit form I can get errors fields
export const customResolver = (parameters) => {
return (values, _context, { fields, names }) => {
const transformedParameters = transformParameters(parameters);
const paramsIds = getParamsIds(transformedParameters);
const { name, value } = Object.values(fields)[0];
let errors = {};
if (names && names[0].length <= 3) {
// Validate single field
const textRequired = transformedParameters
.find(({ id }) => id === name)
.values.find(({ name: valueName }) => value === valueName).textRequired;
if (textRequired && !values[`${names} commentary`]) {
errors = {
[`${names} commentary`]: {
type: "required",
message: "Поле необходимо заполнить!",
},
};
}
} else {
// Validate onSubmit method
errors = Object.entries(values).reduce((acc, [id, fieldValue]) => {
if (paramsIds.includes(id) && !fieldValue) {
return {
...acc,
[id]: { type: "required", message: "Поле необходимо заполнить!" },
};
}
return acc;
}, {});
}
return { values, errors };
};
};
What did I do wrong?
In my project I use ng2-charts. All works fine and chart is shown as expected (data, labels, chart's colors), but when data is changed then color of chart become grey by default. May someone help to correct problem with chart's color?
Here is my code:
import { ChartDataSets } from 'chart.js';
import { Color, Label } from 'ng2-charts';
...
export class JuridicalBidPrimaryComponent extends BidComponent {
lineChartData: ChartDataSets[];
lineChartLabels: Label[];
lineChartLegend = true;
lineChartType = 'line';
lineChartColors: Color[] = [
{
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)'
},
{
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)'
}];
options: any = {
legend: { position: 'bottom' }
}
constructor(
...//inject services
) {
super();
this.initData();
};
initData(): void {
this.lineChartData = [];
this.lineChartLabels = [];
if (this.cabinetId)
this.getData(this.year);
}
getData(year: number) {
this.isLoading = true;
var limitPromise = this.juridicalLimitService.getPrimary(this.cabinetId, year).catch(error => {
this.notificationService.error(error);
return Observable.throw(error);
});
var analyticsPromise = this.juridicalAnalyticsService.getUsedEnergy(this.cabinetId, year).catch(error => {
this.notificationService.error(error);
return Observable.throw(error);
});
forkJoin([limitPromise, analyticsPromise]).subscribe(data => {
this.limits = data[0];
this.lineChartLabels = data[1].map(e => e.Period);
this.lineChartData.push(
{
data: data[1].map(e => e.Limit),
label: 'Bid'
},
{
data: data[1].map(e => e.Used),
label: 'Used'
}
);
this.isLoading = false;
}, error => {
this.isLoading = false;
});
}
}
export abstract class BidComponent {
cabinetId: number;
isLoading: boolean = false;
#Input("periods") periods: BaseDictionary[];
#Input("cabinetId") set CabinetId(cabinetId: number) {
this.cabinetId = cabinetId;
this.initData();
}
abstract initData(): void;
}
As you can see this component is partial and I use setter to listen of cabinetId changes.
Here is html part:
...
<canvas baseChart width="400" height="150"
[options]="options"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[legend]="lineChartLegend"
[chartType]="lineChartType"
[colors]="lineChartColors"></canvas>
...
And I use this component as:
<app-juridical-bid-primary [cabinetId]="cabinetId"></app-juridical-bid-primary>
I find similar question similar question, but, unfortunately, don't understand answer
After some hours of code testing I find answer. It is needed to correct code from question:
...
import * as _ from 'lodash'; //-- useful library
export class JuridicalBidPrimaryComponent extends BidComponent {
lineChartData: ChartDataSets[] = [];
lineChartLabels: Label[] = [];
...
initData(): void {
/*this.lineChartData = [];
this.lineChartLabels = [];*/ //-- this lines is needed to remove
if (this.cabinetId)
this.getData(this.year);
}
getData(year: number) {
...
forkJoin([limitPromise, analyticsPromise]).subscribe(data => {
this.limits = data[0];
this.lineChartLabels.length = 0;
this.lineChartLabels.push(...data[1].map(e => e.Period));
if (_.isEmpty(this.lineChartData)) {
//-- If data array is empty, then we add data series
this.lineChartData.push(
{
data: data[1].map(e => e.Limit),
label: 'Замовлені величини'
},
{
data: data[1].map(e => e.Used),
label: 'Використано'
}
);
} else {
//-- If we have already added data series then we only change data in data series
this.lineChartData[0].data = data[1].map(e => e.Limit);
this.lineChartData[1].data = data[1].map(e => e.Used);
}
this.isLoading = false;
}, error => {
this.isLoading = false;
});
}
}
As I understand ng2-charts, if we clean dataset (lineChartData) and add new data then the library understand this as create new series and don't use primary settings for the ones. So we have to use previous created series.
I hope it will be useful for anyone who will have such problem as I have.
I have a page where a bunch of file ids get loaded from localStorage, then when the component mounts / receives new props, it calls setVariables. While this works and the new variables are set, the results from the initial variables is used during the transition, which causes an odd flickering result.
Why would Relay give me something different during the transition at all? My expectation would be that this.props.viewer.files.hits would be the same as the previous call while setVariables is doing its thing, not the result from using the initial variables.
const enhance = compose(
lifecycle({
componentDidMount() {
const { files, relay } = this.props
if (files.length) {
relay.setVariables(getCartFilterVariables(files))
}
},
}),
shouldUpdate((props, nextProps) => {
if (props.files.length !== nextProps.files.length && nextProps.files.length) {
props.relay.setVariables(getCartFilterVariables(nextProps.files))
}
return true
})
)
export { CartPage }
export default Relay.createContainer(
connect(state => state.cart)(enhance(CartPage)), {
initialVariables: {
first: 20,
offset: 0,
filters: {},
getFiles: false,
sort: '',
},
fragments: {
viewer: () => Relay.QL`
fragment on Root {
summary {
aggregations(filters: $filters) {
project__project_id {
buckets {
case_count
doc_count
file_size
key
}
}
fs { value }
}
}
files {
hits(first: $first, offset: $offset, filters: $filters, sort: $sort) {
${FileTable.getFragment('hits')}
}
}
}
`,
},
}
)
Ah I finally figured this out. prepareParams was changing the value
export const prepareViewerParams = (params, { location: { query } }) => ({
offset: parseIntParam(query.offset, 0),
first: parseIntParam(query.first, 20),
filters: parseJsonParam(query.filters, null), <-- setting filters variable
sort: query.sort || '',
})
const CartRoute = h(Route, {
path: '/cart',
component: CartPage,
prepareParams: prepareViewerParams, <--updating variable
queries: viewerQuery,
})