diff --git a/components/Form/CascadeSelect.tsx b/components/Form/CascadeSelect.tsx deleted file mode 100644 index 4bd662b..0000000 --- a/components/Form/CascadeSelect.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { debounce } from 'lodash'; -import { Component } from 'react'; -import { uniqueID } from 'web-utility'; - -import { SelectInput } from './SelectInput'; - -export interface CascadeProps { - required: boolean; -} - -interface LevelItem { - label?: string; - list: string[]; -} - -export abstract class CascadeSelect< - P extends CascadeProps, -> extends Component

{ - UID = uniqueID(); - - innerPath: string[] = []; - - list: LevelItem[] = []; - - get path() { - return this.innerPath.filter(Boolean).slice(0, -1).join('/'); - } - - get name() { - return this.innerPath.slice(-1)[0]; - } - - get pathName() { - return this.innerPath.filter(Boolean).join('/'); - } - - reset() { - const { innerPath, list } = this; - - this.innerPath = [innerPath[0]]; - this.list = [list[0]]; - } - - componentDidMount() { - this.changeLevel(-1, ''); - } - - abstract getNextLevel(): Promise; - - changeLevel = debounce(async (index: number, value: string) => { - const { innerPath, list } = this; - - innerPath.splice(index, Infinity, value); - - const level = await this.getNextLevel(); - - if (level != null) list.splice(++index, Infinity, level); - else list.length = ++index; - - this.list = list; - }); - - render() { - const { UID, list } = this, - { required } = this.props; - - return ( - <> - {list.map(({ label, list }, index) => { - const IID = `input-${UID}-${index}`, - LID = `list-${UID}-${index}`; - - return ( - - - (value = value.trim()) && this.changeLevel(index, value) - } - required={!index && required} - /> - - - ); - })} - - ); - } -} diff --git a/components/Form/JSONEditor/AddBar.tsx b/components/Form/JSONEditor/AddBar.tsx index 99ec4d0..5d169df 100644 --- a/components/Form/JSONEditor/AddBar.tsx +++ b/components/Form/JSONEditor/AddBar.tsx @@ -1,8 +1,10 @@ +import { Icon } from 'idea-react'; import { FC } from 'react'; +import { Button } from 'react-bootstrap'; const type_map = { - string: { title: 'Inline text', icon: 'grip-lines' }, - text: { title: 'Rows text', icon: 'align-left' }, + string: { title: 'Inline text', icon: 'input-cursor' }, + text: { title: 'Rows text', icon: 'text-left' }, object: { title: 'Key-value list', icon: 'list-ul' }, array: { title: 'Ordered list', icon: 'list-ol' }, }; @@ -12,15 +14,17 @@ export interface AddBarProps { } export const AddBar: FC = ({ onSelect }) => ( -