mirror of
https://github.com/maputnik/editor.git
synced 2026-07-15 10:27:25 +00:00
Initial commit.
This commit is contained in:
HarelM
@@ -27,136 +27,130 @@ export type InputDynamicArrayProps = {
|
||||
|
||||
type InputDynamicArrayInternalProps = InputDynamicArrayProps & WithTranslation;
|
||||
|
||||
class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInternalProps> {
|
||||
changeValue(idx: number, newValue: string | number | undefined) {
|
||||
const values = this.values.slice(0);
|
||||
values[idx] = newValue;
|
||||
if (this.props.onChange) this.props.onChange(values);
|
||||
}
|
||||
const InputDynamicArrayInternal: React.FC<InputDynamicArrayInternalProps> = (props) => {
|
||||
const values = props.value || props.default || [];
|
||||
|
||||
get values() {
|
||||
return this.props.value || this.props.default || [];
|
||||
}
|
||||
|
||||
addValue = () => {
|
||||
const values = this.values.slice(0);
|
||||
if (this.props.type === "number") {
|
||||
values.push(0);
|
||||
}
|
||||
else if (this.props.type === "url") {
|
||||
values.push("");
|
||||
}
|
||||
else if (this.props.type === "enum") {
|
||||
const {fieldSpec} = this.props;
|
||||
const defaultValue = Object.keys(fieldSpec!.values)[0];
|
||||
values.push(defaultValue);
|
||||
} else if (this.props.type === "color") {
|
||||
values.push("#000000");
|
||||
} else {
|
||||
values.push("");
|
||||
}
|
||||
|
||||
if (this.props.onChange) this.props.onChange(values);
|
||||
const changeValue = (idx: number, newValue: string | number | undefined) => {
|
||||
const newValues = values.slice(0);
|
||||
newValues[idx] = newValue;
|
||||
if (props.onChange) props.onChange(newValues);
|
||||
};
|
||||
|
||||
deleteValue(valueIdx: number) {
|
||||
const values = this.values.slice(0);
|
||||
values.splice(valueIdx, 1);
|
||||
const addValue = () => {
|
||||
const newValues = values.slice(0);
|
||||
if (props.type === "number") {
|
||||
newValues.push(0);
|
||||
}
|
||||
else if (props.type === "url") {
|
||||
newValues.push("");
|
||||
}
|
||||
else if (props.type === "enum") {
|
||||
const {fieldSpec} = props;
|
||||
const defaultValue = Object.keys(fieldSpec!.values)[0];
|
||||
newValues.push(defaultValue);
|
||||
} else if (props.type === "color") {
|
||||
newValues.push("#000000");
|
||||
} else {
|
||||
newValues.push("");
|
||||
}
|
||||
|
||||
if (this.props.onChange) this.props.onChange(values.length > 0 ? values : undefined);
|
||||
}
|
||||
if (props.onChange) props.onChange(newValues);
|
||||
};
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
const i18nProps = { t, i18n: this.props.i18n, tReady: this.props.tReady };
|
||||
const inputs = this.values.map((v, i) => {
|
||||
const deleteValueBtn= <DeleteValueInputButton
|
||||
onClick={this.deleteValue.bind(this, i)}
|
||||
{...i18nProps}
|
||||
const deleteValue = (valueIdx: number) => {
|
||||
const newValues = values.slice(0);
|
||||
newValues.splice(valueIdx, 1);
|
||||
|
||||
if (props.onChange) props.onChange(newValues.length > 0 ? newValues : undefined);
|
||||
};
|
||||
|
||||
const t = props.t;
|
||||
const i18nProps = { t, i18n: props.i18n, tReady: props.tReady };
|
||||
const inputs = values.map((v, i) => {
|
||||
const deleteValueBtn= <DeleteValueInputButton
|
||||
onClick={deleteValue.bind(null, i)}
|
||||
{...i18nProps}
|
||||
/>;
|
||||
let input;
|
||||
if(props.type === "url") {
|
||||
input = <InputUrl
|
||||
value={v as string}
|
||||
onChange={changeValue.bind(null, i)}
|
||||
aria-label={props["aria-label"] || props.label}
|
||||
/>;
|
||||
let input;
|
||||
if(this.props.type === "url") {
|
||||
input = <InputUrl
|
||||
value={v as string}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
else if (this.props.type === "number") {
|
||||
input = <InputNumber
|
||||
value={v as number}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
else if (this.props.type === "enum") {
|
||||
const options = Object.keys(this.props.fieldSpec?.values).map(v => [v, capitalize(v)]);
|
||||
input = <InputEnum
|
||||
options={options}
|
||||
value={v as string}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
else if (this.props.type === "color") {
|
||||
input = <InputColor
|
||||
value={v as string}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
else {
|
||||
input = <InputString
|
||||
value={v as string}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
else if (props.type === "number") {
|
||||
input = <InputNumber
|
||||
value={v as number}
|
||||
onChange={changeValue.bind(null, i)}
|
||||
aria-label={props["aria-label"] || props.label}
|
||||
/>;
|
||||
}
|
||||
else if (props.type === "enum") {
|
||||
const options = Object.keys(props.fieldSpec?.values).map(v => [v, capitalize(v)]);
|
||||
input = <InputEnum
|
||||
options={options}
|
||||
value={v as string}
|
||||
onChange={changeValue.bind(null, i)}
|
||||
aria-label={props["aria-label"] || props.label}
|
||||
/>;
|
||||
}
|
||||
else if (props.type === "color") {
|
||||
input = <InputColor
|
||||
value={v as string}
|
||||
onChange={changeValue.bind(null, i)}
|
||||
aria-label={props["aria-label"] || props.label}
|
||||
/>;
|
||||
}
|
||||
else {
|
||||
input = <InputString
|
||||
value={v as string}
|
||||
onChange={changeValue.bind(null, i)}
|
||||
aria-label={props["aria-label"] || props.label}
|
||||
/>;
|
||||
}
|
||||
|
||||
return <div
|
||||
style={this.props.style}
|
||||
key={i}
|
||||
className="maputnik-array-block"
|
||||
>
|
||||
<div className="maputnik-array-block-action">
|
||||
{deleteValueBtn}
|
||||
</div>
|
||||
<div className="maputnik-array-block-content">
|
||||
{input}
|
||||
</div>
|
||||
</div>;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="maputnik-array">
|
||||
{inputs}
|
||||
<InputButton
|
||||
className="maputnik-array-add-value"
|
||||
onClick={this.addValue}
|
||||
>
|
||||
{t("Add value")}
|
||||
</InputButton>
|
||||
return <div
|
||||
style={props.style}
|
||||
key={i}
|
||||
className="maputnik-array-block"
|
||||
>
|
||||
<div className="maputnik-array-block-action">
|
||||
{deleteValueBtn}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
<div className="maputnik-array-block-content">
|
||||
{input}
|
||||
</div>
|
||||
</div>;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="maputnik-array">
|
||||
{inputs}
|
||||
<InputButton
|
||||
className="maputnik-array-add-value"
|
||||
onClick={addValue}
|
||||
>
|
||||
{t("Add value")}
|
||||
</InputButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const InputDynamicArray = withTranslation()(InputDynamicArrayInternal);
|
||||
type DeleteValueInputButtonProps = {
|
||||
onClick?(...args: unknown[]): unknown
|
||||
} & WithTranslation;
|
||||
|
||||
class DeleteValueInputButton extends React.Component<DeleteValueInputButtonProps> {
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
return <InputButton
|
||||
className="maputnik-delete-stop"
|
||||
onClick={this.props.onClick}
|
||||
title={t("Remove array item")}
|
||||
>
|
||||
<FieldDocLabel
|
||||
label={<MdDelete />}
|
||||
/>
|
||||
</InputButton>;
|
||||
}
|
||||
}
|
||||
const DeleteValueInputButton: React.FC<DeleteValueInputButtonProps> = (props) => {
|
||||
const t = props.t;
|
||||
return <InputButton
|
||||
className="maputnik-delete-stop"
|
||||
onClick={props.onClick}
|
||||
title={t("Remove array item")}
|
||||
>
|
||||
<FieldDocLabel
|
||||
label={<MdDelete />}
|
||||
/>
|
||||
</InputButton>;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user