[];
10 | rootStore?: any;
11 | title: string;
12 | }
13 | export interface IExtensionGroup {
14 | new (props: any): React.Component;
15 | }
16 | interface IExtensionGroupStates {
17 | }
18 | export default ExtensionGroup;
19 |
--------------------------------------------------------------------------------
/src/sources/icons/body.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
37 |
--------------------------------------------------------------------------------
/src/containers/sidebar/Property/items/Align.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Align } from '../../../../components';
3 |
4 | const AlignItem = ({ align = 'center', title = "Alignments", onUpdate = () => { } }: IAlignItemProps) => (
5 |
6 |
7 |
8 |
9 |
10 |
{ onUpdate('textAlign', align); }} />
11 |
12 |
13 |
7 | {addOn &&
8 | {addOn}
9 |
}
10 |
11 |
8 | onChange(value)}
11 | highlight={code => { const a = highlight(code, languages.html); console.log(code, a); return a; }}
12 | padding={10}
13 | style={{
14 | fontFamily: '"Fira code", "Fira Mono", monospace',
15 | fontSize: 12,
16 | }}
17 | />
18 |
);
19 |
20 | interface IHtmlProps {
21 | value?: string;
22 | onChange?: (value: string) => void;
23 | style?: IKeyValueMap;
24 | }
--------------------------------------------------------------------------------
/lib/components/form/AutoCompletePanel.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './index.less';
3 | declare class AutoCompletePanel extends React.Component {
4 | dom: HTMLDivElement;
5 | state: IAutoCompletePanelState;
6 | componentDidMount(): void;
7 | componentWillUnmount(): void;
8 | pressKey: (e: any) => void;
9 | onBodyClick: (e: any) => void;
10 | onItemClick: (item: any) => void;
11 | onRef: (dom: any) => void;
12 | render(): JSX.Element;
13 | }
14 | interface IAutoCompletePanelProps {
15 | data?: IItem[];
16 | show?: boolean;
17 | position?: IPosition;
18 | onClick?: (item: IItem) => void;
19 | onClose?: () => void;
20 | }
21 | interface IAutoCompletePanelState {
22 | index: number;
23 | }
24 | export default AutoCompletePanel;
25 |
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/Switch.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../../src/containers/sidebar/Property/items/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,IAAM,UAAU,GAAG,UAAC,EAA0H;QAAxH,aAAgC,EAAhC,qDAAgC,EAAE,eAAe,EAAf,oCAAe,EAAE,iBAA2B,EAA3B,gDAA2B,EAAE,gBAAoB,EAApB,+CAAoB;IAAyB,OAAA,CACjJ,6BAAK,SAAS,EAAC,0BAA0B;QACvC,6BAAK,SAAS,EAAC,UAAU;YACvB,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,+BAAO,SAAS,EAAC,kBAAkB;oBACjC,8BAAM,KAAK,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,IAAG,KAAK,CAAQ;oBAChD,6BAAK,KAAK,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAE;wBAC9D,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAA,OAAO,IAAM,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,GAAI,CACvG,CACA,CACJ,CACF,CACF,CAAC;AAZ0I,CAY1I,CAAC;AASV,eAAe,UAAU,CAAC"}
--------------------------------------------------------------------------------
/src/components/error/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | class ErrorBoundary extends React.Component {
4 | constructor(props: IErrorBoundaryProps) {
5 | super(props);
6 | this.state = { hasError: false };
7 | }
8 |
9 | componentDidCatch(error: IError, info: React.ErrorInfo) {
10 | this.setState({ hasError: true });
11 | }
12 |
13 | render() {
14 | const { tips = 'SOMETHING WENT WRONG' } = this.props;
15 | if (this.state.hasError) {
16 | return tips;
17 | }
18 | return this.props.children;
19 | }
20 | }
21 |
22 | interface IErrorBoundaryProps {
23 | tips?: string | React.ReactNode;
24 | children?: React.ReactNode;
25 | }
26 |
27 | interface IErrorBoundaryStates {
28 | hasError: boolean;
29 | }
30 |
31 | export default ErrorBoundary;
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/Input.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/containers/sidebar/Property/items/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,IAAM,SAAS,GAAG,UAAC,EAAwE;QAAtE,gBAAK,EAAE,gBAAK,EAAE,wBAAS,EAAE,cAAI,EAAE,gBAAoB,EAApB,+CAAoB;IAAwB,OAAA,CAC9F,6BAAK,SAAS,EAAC,0BAA0B;QACvC,6BAAK,SAAS,EAAC,UAAU;YACvB,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,+BAAO,SAAS,EAAC,kBAAkB;oBAAC,kCAAO,KAAK,CAAQ,CAAQ,CAC5D,CACF;QACN,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;YAChD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,KAAK,IAAC,QAAQ,EAAE,UAAA,CAAC,IAAM,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI;gBAC/E,IAAI,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IACrC,IAAI,CACD,CACF,CACF,CACF,CAAC;AAfuF,CAevF,CAAC;AAUV,eAAe,SAAS,CAAC"}
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/index.d.ts:
--------------------------------------------------------------------------------
1 | export { default as Link } from './Link';
2 | export { default as Colors } from './Colors';
3 | export { default as Align } from './Align';
4 | export { default as LineHeight } from './LineHeight';
5 | export { default as BorderRadius } from './BorderRadius';
6 | export { default as Color } from './Color';
7 | export { default as Switch } from './Switch';
8 | export { default as Space } from './Space';
9 | export { default as Slide } from './Slide';
10 | export { default as Line } from './Line';
11 | export { default as HtmlEditor } from './Html';
12 | export { default as Input } from './Input';
13 | export { default as ImageEditor } from './Image';
14 | export { default as NumberItem } from './Number';
15 | export { default as Font } from './Font';
16 | export { default as SocialItem } from './SocialItem';
17 |
--------------------------------------------------------------------------------
/src/containers/sidebar/Property/items/BorderRadius.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Number } from '../../../../components';
3 |
4 | const BorderRadius = ({ borderRadius = 4, title = "Rounded Border", onUpdate = () => { } }: IBorderRadiusProps) => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | { onUpdate('borderRadius', val); }} />
12 |
13 |
14 |
6 |
7 |
8 |
9 |
10 |
11 | { onUpdate(key, val); }} />
12 |
13 |
14 |
6 |
7 |
8 |
9 |
10 |
11 | { onUpdate(attribute, val); }} />
12 |
13 |
14 |
6 |
7 |
8 |
9 |
10 |
11 |
16 |
17 |
18 |
{label}
);
13 | }
14 | }
15 | return ContentElement;
16 | }
17 |
18 | interface IContentElementProps {
19 | connectDragSource?: ConnectDragSource;
20 | key?: string;
21 | }
22 |
23 | export default ContentFactory;
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/index.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/sidebar/Property/items/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
--------------------------------------------------------------------------------
/src/containers/sidebar/Property/items/Switch.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Switch from "react-switch";
3 |
4 | const SwitchItem = ({ title = 'Do Not Stack on Mobile', checked = false, attribute = 'noStackMobile', onUpdate = () => { } }: ISwitchItemProps) => (
5 |
6 |
7 |
8 |
14 |
15 |
16 |
6 |
11 |
12 |
13 |
{ onUpdate(attribute, e.target.value); }} value={value} />
14 | {desc &&
15 | {desc}
16 |
}
17 |
18 |
19 |
6 |
7 |
8 |
9 |
10 |
11 | `${val}%`}
15 | parser={val => val.replace('%', '')}
16 | value={lineHeight}
17 | onChange={val => { onUpdate('lineHeight', val); }}
18 | />
19 |
20 |
21 |
{children}
;
15 |
16 | interface IButtonProps {
17 | children?: React.ReactFragment;
18 | style?: IKeyValueMap;
19 | className?: string;
20 | icon?: string;
21 | loading?: boolean;
22 | onClick?: (event: React.MouseEvent) => void;
23 | }
24 |
25 | interface IButtonGroupProps {
26 | children?: React.ReactFragment;
27 | className?: string;
28 | }
29 |
30 | export default Button;
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/Line.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Line } from '../../../../components';
3 | var LineItem = function (_a) {
4 | var _b = _a.title, title = _b === void 0 ? "Line" : _b, lineWidth = _a.lineWidth, lineStyle = _a.lineStyle, lineColor = _a.lineColor, _c = _a.onUpdate, onUpdate = _c === void 0 ? function () { } : _c;
5 | return (React.createElement("div", { className: "ds-widget ds-link-widget" },
6 | React.createElement("div", { className: "card-row" },
7 | React.createElement("div", { className: "ds-widget-label col-6" },
8 | React.createElement("label", { className: "ds-label-primary" },
9 | React.createElement("span", null, title))),
10 | React.createElement("div", { className: "col-6" },
11 | React.createElement(Line, { lineWidth: lineWidth, lineStyle: lineStyle, lineColor: lineColor, onUpdate: function (key, val) { onUpdate(key, val); } })))));
12 | };
13 | export default LineItem;
14 | //# sourceMappingURL=Line.js.map
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/Link.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../../src/containers/sidebar/Property/items/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,IAAM,IAAI,GAAG,UAAC,EAA2D;QAAzD,gBAAK,EAAE,sBAAQ,EAAE,cAAI,EAAE,gBAAoB,EAApB,+CAAoB;IAAmB,OAAA,CAC5E,6BAAK,SAAS,EAAC,0BAA0B;QACvC,6BAAK,SAAS,EAAC,UAAU;YACvB,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,+BAAO,SAAS,EAAC,kBAAkB;oBAAC,kCAAO,KAAK,CAAQ,CAAQ,CAC5D;YACN,6BAAK,SAAS,EAAC,OAAO;gBACpB,gCAAQ,SAAS,EAAC,8BAA8B,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAA,CAAC,IAAM,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;oBACxH,gCAAQ,KAAK,EAAC,OAAO,eAAkB;oBACvC,gCAAQ,KAAK,EAAC,QAAQ,cAAiB,CAChC,CACL,CACF;QACN,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;YAChD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,KAAK,IAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAE,UAAA,CAAC,IAAM,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,GAAI,CACpF,CACF,CACF,CAAC;AAlBqE,CAkBrE,CAAC;AASV,eAAe,IAAI,CAAC"}
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/BorderRadius.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Number } from '../../../../components';
3 | var BorderRadius = function (_a) {
4 | var _b = _a.borderRadius, borderRadius = _b === void 0 ? 4 : _b, _c = _a.title, title = _c === void 0 ? "Rounded Border" : _c, _d = _a.onUpdate, onUpdate = _d === void 0 ? function () { } : _d;
5 | return (React.createElement("div", { className: "ds-widget ds-link-widget" },
6 | React.createElement("div", { className: "card-row" },
7 | React.createElement("div", { className: "ds-widget-label col-6" },
8 | React.createElement("label", { className: "ds-label-primary" },
9 | React.createElement("span", null, title))),
10 | React.createElement("div", { className: "col-6 text-right" },
11 | React.createElement(Number, { max: 100, step: 1, value: borderRadius, onChange: function (val) { onUpdate('borderRadius', val); } })))));
12 | };
13 | export default BorderRadius;
14 | //# sourceMappingURL=BorderRadius.js.map
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/Slide.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"Slide.js","sourceRoot":"","sources":["../../../../../src/containers/sidebar/Property/items/Slide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,IAAM,KAAK,GAAG,UAAC,EAAwF;QAAtF,aAAe,EAAf,oCAAe,EAAE,aAAW,EAAX,gCAAW,EAAE,iBAAmB,EAAnB,wCAAmB,EAAE,gBAAoB,EAApB,+CAAoB;IAAoB,OAAA,CAC1G,6BAAK,SAAS,EAAC,0BAA0B;QACvC,6BAAK,SAAS,EAAC,UAAU;YACvB,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,+BAAO,SAAS,EAAC,kBAAkB;oBAAC,kCAAO,KAAK,CAAQ,CAAQ,CAC5D;YACN,6BAAK,SAAS,EAAC,OAAO;gBACpB,oBAAC,MAAM,IACL,UAAU,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,EAC1C,WAAW,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EACvC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAA,GAAG,IAAM,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAC9C;gBACF,oBAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAA,GAAG,IAAM,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,GAAI,CACxH,CACF,CACF,CAAC;AAhBmG,CAgBnG,CAAC;AASV,eAAe,KAAK,CAAC"}
--------------------------------------------------------------------------------
/src/containers/sidebar/Property/items/Color.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ColorPicker from 'rc-color-picker';
3 | import { rgb2rgba, rgba2rgb } from '../../../../lib/util';
4 | import { IRGBA } from '../../../../schemas/common';
5 | import 'rc-color-picker/assets/index.css';
6 |
7 | const Color = ({ title = 'Color', value = '#fff', attribute = 'color', onUpdate = () => { } }: IColorProps) => {
8 | const rgba: IRGBA = rgba2rgb(value);
9 | return
10 |
11 |
12 |
13 |
14 |
15 | { onUpdate(attribute, rgb2rgba(e.color, e.alpha)); }} />
16 |
17 |
18 |
14 | {rootStore.DesignState.extensions.filter(extension => extension.group === group).map(Extension => {
15 | const instance = new Extension();
16 | return ContentFactory(instance.getContentType(), instance.getLabel(), instance.getIconClass());
17 | })
18 | .map((Component, index) => )}
19 |
20 | );
21 | }
22 | }
23 |
24 | interface IContentProps {
25 | rootStore?: any;
26 | }
27 |
28 | export default Content;
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/Number.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Number } from '../../../../components';
3 | var NumberItem = function (_a) {
4 | var title = _a.title, value = _a.value, _b = _a.step, step = _b === void 0 ? 50 : _b, _c = _a.max, max = _c === void 0 ? 1000 : _c, _d = _a.min, min = _d === void 0 ? 0 : _d, attribute = _a.attribute, _e = _a.onUpdate, onUpdate = _e === void 0 ? function () { } : _e;
5 | return (React.createElement("div", { className: "ds-widget ds-link-widget" },
6 | React.createElement("div", { className: "card-row" },
7 | React.createElement("div", { className: "ds-widget-label col-6" },
8 | React.createElement("label", { className: "ds-label-primary" },
9 | React.createElement("span", null, title))),
10 | React.createElement("div", { className: "col-6 text-right" },
11 | React.createElement(Number, { max: max, min: min, step: step, value: value, onChange: function (val) { onUpdate(attribute, val); } })))));
12 | };
13 | export default NumberItem;
14 | //# sourceMappingURL=Number.js.map
--------------------------------------------------------------------------------
/lib/components/tinymce/index.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AutoComplete from './autocomplete';
3 | interface ITinyMceProps {
4 | focus?: boolean;
5 | value?: string;
6 | autoComplete?: boolean;
7 | config?: IKeyValueMap;
8 | onChange?: (type: string, content: string) => void;
9 | getContainer?: () => HTMLDivElement;
10 | }
11 | declare class TinyMce extends React.Component {
12 | _isMounted: boolean;
13 | autoComplete: AutoComplete;
14 | editor: any;
15 | state: {
16 | showDynamic: boolean;
17 | query: string;
18 | data: any[];
19 | position: {
20 | x: number;
21 | y: number;
22 | };
23 | };
24 | componentDidMount(): void;
25 | componentDidUpdate({ focus }: {
26 | focus: any;
27 | }): void;
28 | componentWillUnmount(): void;
29 | handleEditorChange: (editor: any) => void;
30 | insertDynamic: (value: any) => void;
31 | initAutoComplete: (editor: any) => void;
32 | getContainer: () => HTMLDivElement;
33 | render(): JSX.Element;
34 | }
35 | export default TinyMce;
36 |
--------------------------------------------------------------------------------
/lib/containers/Content.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"Content.js","sourceRoot":"","sources":["../../src/containers/Content.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,KAAK,MAAM,0BAA0B,CAAC;AAI7C;IAAsB,2BAA8B;IAApD;;IAcA,CAAC;IAbC,wBAAM,GAAN;QACU,IAAA,gCAAS,CAAgB;QACjC,IAAM,eAAe,GAAG,SAAS,CAAC,WAAW,CAAC,kBAAkB,EAAE,CAAC;QACnE,OAAO,eAAe,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,cAAc;YAC3F,4BAAI,SAAS,EAAC,YAAY,IACvB,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC,UAAA,SAAS,IAAI,OAAA,SAAS,CAAC,KAAK,KAAK,KAAK,EAAzB,CAAyB,CAAC,CAAC,GAAG,CAAC,UAAA,SAAS;gBAC5F,IAAM,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC;gBACjC,OAAO,cAAc,CAAC,QAAQ,CAAC,cAAc,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;YACjG,CAAC,CAAC;iBACC,GAAG,CAAC,UAAC,SAAS,EAAE,KAAK,IAAK,OAAA,oBAAC,SAAS,IAAC,GAAG,EAAK,KAAK,SAAI,KAAO,GAAI,EAAvC,CAAuC,CAAC,CAClE,CACC,EAR4B,CAQ5B,CAAC,CAAC;IACZ,CAAC;IAbG,OAAO;QAFZ,MAAM,CAAC,WAAW,CAAC;QACnB,QAAQ;OACH,OAAO,CAcZ;IAAD,cAAC;CAAA,AAdD,CAAsB,KAAK,CAAC,SAAS,GAcpC;AAMD,eAAe,OAAO,CAAC"}
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 lang.yang
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/Input.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input } from '../../../../components';
3 | var InputItem = function (_a) {
4 | var title = _a.title, value = _a.value, attribute = _a.attribute, desc = _a.desc, _b = _a.onUpdate, onUpdate = _b === void 0 ? function () { } : _b;
5 | return (React.createElement("div", { className: "ds-widget ds-link-widget" },
6 | React.createElement("div", { className: "card-row" },
7 | React.createElement("div", { className: "ds-widget-label col-6" },
8 | React.createElement("label", { className: "ds-label-primary" },
9 | React.createElement("span", null, title)))),
10 | React.createElement("div", { className: "card-row", style: { marginTop: 10 } },
11 | React.createElement("div", { className: "col-12" },
12 | React.createElement(Input, { onChange: function (e) { onUpdate(attribute, e.target.value); }, value: value }),
13 | desc && React.createElement("div", { className: "ds-widget-hint" }, desc)))));
14 | };
15 | export default InputItem;
16 | //# sourceMappingURL=Input.js.map
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/items/LineHeight.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Number } from '../../../../components';
3 | var LineHeight = function (_a) {
4 | var _b = _a.lineHeight, lineHeight = _b === void 0 ? 120 : _b, _c = _a.title, title = _c === void 0 ? "Line Height" : _c, _d = _a.onUpdate, onUpdate = _d === void 0 ? function () { } : _d;
5 | return (React.createElement("div", { className: "ds-widget ds-link-widget" },
6 | React.createElement("div", { className: "card-row" },
7 | React.createElement("div", { className: "ds-widget-label col-6" },
8 | React.createElement("label", { className: "ds-label-primary" },
9 | React.createElement("span", null, title))),
10 | React.createElement("div", { className: "col-6 text-right" },
11 | React.createElement(Number, { max: 1000, step: 10, formatter: function (val) { return val + "%"; }, parser: function (val) { return val.replace('%', ''); }, value: lineHeight, onChange: function (val) { onUpdate('lineHeight', val); } })))));
12 | };
13 | export default LineHeight;
14 | //# sourceMappingURL=LineHeight.js.map
--------------------------------------------------------------------------------
/src/containers/sidebar/Property/items/Slide.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Slider from 'rc-slider';
3 | import 'rc-slider/assets/index.css';
4 | import { Number } from '../../../../components';
5 |
6 | const Slide = ({ title = "Width", value = 100, attribute = 'width', onUpdate = () => { } }: ISlideProps) => (
7 |
8 |
9 |
10 |
11 |
12 |
13 | { onUpdate(attribute, val); }}
18 | />
19 | { onUpdate(attribute, val); }} style={{ marginTop: 5 }} />
20 |
21 |
22 |
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 | { onUpdate('link', e.target.value); }} value={link} />
20 |
21 |
22 |
{
5 | static check: boolean;
6 | type: string;
7 | componentWillUnmount(): void;
8 | abstract getIconClass(): string;
9 | abstract getLabel(): string;
10 | abstract getContentType(): string;
11 | abstract toHtml(json: IKeyValueMap): string;
12 | abstract getInitialAttribute(): P & IExtensionProps;
13 | abstract getProperties(values: P & IExtensionProps, update: onUpdate): React.ReactFragment;
14 | }
15 | export interface IExtensionProps {
16 | focus?: boolean;
17 | onUpdate?: onUpdate;
18 | _meta?: IContentMeta;
19 | }
20 | export interface IExtension
{
21 | new (props: any): React.Component;
22 | type?: ContentType | string;
23 | group?: string;
24 | getContentType: () => string;
25 | getLabel: () => string;
26 | getIconClass: () => string;
27 | toHtml: (json: IKeyValueMap) => string;
28 | getInitialAttribute: () => P & IExtensionProps;
29 | getProperties: (values: P & IExtensionProps, update: onUpdate) => React.ReactFragment;
30 | }
31 | export default Extension;
32 |
--------------------------------------------------------------------------------
/src/sources/icons/up.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
45 |
--------------------------------------------------------------------------------
/src/sources/icons/email.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
49 |
--------------------------------------------------------------------------------
/src/components/form/Line.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ColorPicker from 'rc-color-picker';
3 | import 'rc-color-picker/assets/index.css';
4 | import './index.less';
5 | import Number from './Number';
6 | import { rgb2rgba, rgba2rgb } from '../../lib/util';
7 |
8 | export default ({ lineWidth, lineStyle, lineColor, onUpdate }: ILineProps) => {
9 | const rgba = rgba2rgb(lineColor);
10 | return
11 |
16 |
17 |
18 | { onUpdate('lineWidth', val); }} />
19 |
20 |
21 | { onUpdate('lineColor', rgb2rgba(e.color, e.alpha)); }} />
22 |
23 |
{
6 |
7 | static check: boolean = true;
8 | type: string;
9 |
10 | componentWillUnmount() {
11 | this.setState = (state: IExtendsionState, callback) => { };
12 | }
13 |
14 | abstract getIconClass(): string;
15 |
16 | abstract getLabel(): string;
17 |
18 | abstract getContentType(): string;
19 |
20 | abstract toHtml(json: IKeyValueMap): string;
21 |
22 | abstract getInitialAttribute(): P & IExtensionProps;
23 |
24 | abstract getProperties(values: P & IExtensionProps, update: onUpdate): React.ReactFragment;
25 | }
26 |
27 | export interface IExtensionProps {
28 | focus?: boolean;
29 | onUpdate?: onUpdate;
30 | _meta?: IContentMeta;
31 | }
32 |
33 | export interface IExtension {
34 | new (props: any): React.Component;
35 | type?: ContentType | string;
36 | group?: string;
37 | getContentType: () => string;
38 | getLabel: () => string;
39 | getIconClass: () => string;
40 | toHtml: (json: IKeyValueMap) => string;
41 | getInitialAttribute: () => P & IExtensionProps;
42 | getProperties: (values: P & IExtensionProps, update: onUpdate) => React.ReactFragment;
43 | }
44 |
45 | interface IExtendsionState {
46 | }
47 |
48 | export default Extension;
--------------------------------------------------------------------------------
/lib/containers/SideBar.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"SideBar.js","sourceRoot":"","sources":["../../src/containers/SideBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,GAAG,MAAM,OAAO,CAAC;AACxB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,QAAQ,MAAM,6BAA6B,CAAC;AACnD,OAAO,YAAY,MAAM,iCAAiC,CAAC;AAI3D;IAAsB,2BAA8B;IAFpD;QAAA,qEAgCC;QA7BC,WAAK,GAAG;YACN,MAAM,EAAE,CAAC;SACV,CAAA;QAED,cAAQ,GAAG,UAAC,GAAG,EAAE,KAAK;YACC,IAAA,+CAAW,CAAkB;YAClD,WAAW,CAAC,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC9C,CAAC,CAAA;QAED,gBAAU,GAAG;YACU,IAAA,+CAAW,CAAkB;YAClD,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC,CAAA;;IAiBH,CAAC;IAhBC,wBAAM,GAAN;QACuB,IAAA,8CAAW,CAAkB;QAClD,IAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QAC1C,OAAO,6BAAK,SAAS,EAAC,YAAY;YAChC,oBAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,UAAU;gBAC5B,oBAAC,IAAI,CAAC,GAAG,IAAC,GAAG,EAAC,SAAS,EAAC,IAAI,EAAC,gBAAgB;oBAAC,oBAAC,OAAO,OAAG,CAAW;gBACpE,oBAAC,IAAI,CAAC,GAAG,IAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,wBAAwB;oBAAC,oBAAC,GAAG,OAAG,CAAW;gBACpE,oBAAC,IAAI,CAAC,GAAG,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,gBAAgB;oBACxC,6BAAK,SAAS,EAAC,oCAAoC;wBACjD,oBAAC,YAAY,eAAK,IAAI,IAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAC/C,CACG,CACN;YACP,oBAAC,QAAQ,IAAC,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,QAAQ,EAAE,UAAU,EAAE,WAAW,CAAC,QAAQ,EAAE,cAAc,SAAG,CAC1F,CAAC;IACT,CAAC;IA7BG,OAAO;QAFZ,MAAM,CAAC,WAAW,CAAC;QACnB,QAAQ;OACH,OAAO,CA8BZ;IAAD,cAAC;CAAA,AA9BD,CAAsB,KAAK,CAAC,SAAS,GA8BpC;AAMD,eAAe,OAAO,CAAC"}
--------------------------------------------------------------------------------
/lib/components/utils/util.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/components/utils/util.ts"],"names":[],"mappings":"AAEA,IAAI,aAAa,GAAG,EAAE,CAAC;AAEvB,IAAM,gBAAgB,GAAG,UAAA,CAAC;IACxB,aAAa,CAAC,OAAO,CAAC,UAAA,GAAG;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,GAAG,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;YAAE,OAAO;QAC3E,GAAG,CAAC,SAAS,CAAC,OAAO,CAAC,UAAA,QAAQ,IAAI,OAAA,QAAQ,EAAE,EAAV,CAAU,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;AAEjE,IAAM,IAAI,GAAG;IACX,QAAQ,EAAE,UAAC,GAAG,EAAE,SAAS;QACvB,OAAO,GAAG,KAAK,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM,EAAE;YAC9F,IAAI,GAAG,KAAK,SAAS,EAAE;gBACrB,OAAO,IAAI,CAAC;aACb;YACD,6CAA6C;YAC7C,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC;SACtB;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IACD,QAAQ,EAAE,UAAC,MAAM,EAAE,QAAQ;QACzB,IAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,KAAK,MAAM,EAAtB,CAAsB,CAAC,CAAC;QACvE,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;YACxB,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACvC;aAAM;YACL,aAAa,CAAC,IAAI,CAAC;gBACjB,MAAM,QAAA;gBACN,SAAS,EAAE,CAAC,QAAQ,CAAC;aACtB,CAAC,CAAC;SACJ;QACD,OAAO;YACL,MAAM,EAAE;gBACN,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,KAAK,MAAM,EAAtB,CAAsB,CAAC,CAAC;YACvE,CAAC;SACF,CAAC;IACJ,CAAC;IACD,cAAc,EAAE,UAAA,MAAM;QACpB,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,KAAK,MAAM,EAAtB,CAAsB,CAAC,CAAC;IACvE,CAAC;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
--------------------------------------------------------------------------------
/lib/components/error/ErrorBoundary.js:
--------------------------------------------------------------------------------
1 | var __extends = (this && this.__extends) || (function () {
2 | var extendStatics = function (d, b) {
3 | extendStatics = Object.setPrototypeOf ||
4 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6 | return extendStatics(d, b);
7 | };
8 | return function (d, b) {
9 | extendStatics(d, b);
10 | function __() { this.constructor = d; }
11 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12 | };
13 | })();
14 | import * as React from 'react';
15 | var ErrorBoundary = /** @class */ (function (_super) {
16 | __extends(ErrorBoundary, _super);
17 | function ErrorBoundary(props) {
18 | var _this = _super.call(this, props) || this;
19 | _this.state = { hasError: false };
20 | return _this;
21 | }
22 | ErrorBoundary.prototype.componentDidCatch = function (error, info) {
23 | this.setState({ hasError: true });
24 | };
25 | ErrorBoundary.prototype.render = function () {
26 | var _a = this.props.tips, tips = _a === void 0 ? 'SOMETHING WENT WRONG' : _a;
27 | if (this.state.hasError) {
28 | return tips;
29 | }
30 | return this.props.children;
31 | };
32 | return ErrorBoundary;
33 | }(React.Component));
34 | export default ErrorBoundary;
35 | //# sourceMappingURL=ErrorBoundary.js.map
--------------------------------------------------------------------------------
/lib/components/form/Line.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ColorPicker from 'rc-color-picker';
3 | import 'rc-color-picker/assets/index.css';
4 | import './index.less';
5 | import Number from './Number';
6 | import { rgb2rgba, rgba2rgb } from '../../lib/util';
7 | export default (function (_a) {
8 | var lineWidth = _a.lineWidth, lineStyle = _a.lineStyle, lineColor = _a.lineColor, onUpdate = _a.onUpdate;
9 | var rgba = rgba2rgb(lineColor);
10 | return React.createElement(React.Fragment, null,
11 | React.createElement("select", { className: "form-control", value: lineStyle, onChange: function (e) { onUpdate('lineStyle', e.target.value); } },
12 | React.createElement("option", { value: "solid" }, "Solid"),
13 | React.createElement("option", { value: "dotted" }, "Dotted"),
14 | React.createElement("option", { value: "dashed" }, "Dashed")),
15 | React.createElement("div", { style: { marginTop: 5 } },
16 | React.createElement("div", { style: { display: 'inline-block', verticalAlign: 'top' } },
17 | React.createElement(Number, { max: 20, min: 1, step: 1, value: lineWidth, onChange: function (val) { onUpdate('lineWidth', val); } })),
18 | React.createElement("div", { style: { display: 'inline-block', marginLeft: 30 } },
19 | React.createElement(ColorPicker, { color: rgba.rgb, alpha: rgba.alpha, onChange: function (e) { onUpdate('lineColor', rgb2rgba(e.color, e.alpha)); } }))));
20 | });
21 | //# sourceMappingURL=Line.js.map
--------------------------------------------------------------------------------
/src/containers/sidebar/Property/Group.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classnames from 'classnames';
3 | import AnimateHeight from 'react-animate-height';
4 |
5 | class Group extends React.Component {
6 |
7 | state: IGroupState = {
8 | height: 'auto',
9 | expand: true,
10 | }
11 |
12 | toggle = () => {
13 | if (this.state.expand) {
14 | this.setState({ height: 0, expand: false });
15 | } else {
16 | this.setState({ height: 'auto', expand: true });
17 | }
18 | }
19 |
20 | render() {
21 | const { title, children, className } = this.props;
22 | return
23 |
24 |
25 |
{title}
26 |
27 |
28 |
29 |
30 |
31 |
35 |
36 | {children}
37 |
38 |
39 |
28 | {React.Children.toArray(children)[this.state.selectedIndex]}
29 |
30 | ;
31 | }
32 | }
33 |
34 | interface ITabsProps {
35 | onClick?: (event: React.MouseEvent) => void;
36 | }
37 |
38 | interface ITabsState {
39 | selectedIndex: number;
40 | }
41 |
42 | class Tab extends React.Component {
43 | render() {
44 | const { children } = this.props;
45 | return {children}
;
46 | }
47 | }
48 |
49 | interface ITabProps {
50 | icon?: string;
51 | tab?: string;
52 | }
53 |
54 | Tabs.Tab = Tab;
55 |
56 | export default Tabs;
--------------------------------------------------------------------------------
/src/sources/icons/youtube2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
49 |
--------------------------------------------------------------------------------
/lib/containers/sidebar/Property/RowProperty.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Group from './Group';
3 | import { Color, Switch, Space, ImageEditor } from './items';
4 | var RowProperty = function (_a) {
5 | var columnsBackgroundColor = _a.columnsBackgroundColor, backgroundColor = _a.backgroundColor, backgroundImage = _a.backgroundImage, noStackMobile = _a.noStackMobile, padding = _a.padding, fullWidth = _a.fullWidth, repeat = _a.repeat, center = _a.center, _meta = _a._meta, onUpdate = _a.onUpdate;
6 | return React.createElement(React.Fragment, null,
7 | React.createElement(Group, { title: "GENERAL" },
8 | React.createElement(Color, { title: "Background Color", value: backgroundColor, attribute: "backgroundColor", onUpdate: onUpdate }),
9 | React.createElement(ImageEditor, { key: _meta.guid, attribute: "backgroundImage", url: backgroundImage, fullWidth: fullWidth, repeat: repeat, center: center, options: true, onUpdate: onUpdate }),
10 | React.createElement(Space, { title: "Padding", value: padding, attribute: "padding", onUpdate: onUpdate })),
11 | React.createElement(Group, { title: "MOBILE" },
12 | React.createElement(Switch, { title: "Do Not Stack on Mobile", checked: noStackMobile, attribute: "noStackMobile", onUpdate: onUpdate })),
13 | React.createElement(Group, { title: "CONTENT" },
14 | React.createElement(Color, { title: "Columns Background", value: columnsBackgroundColor, attribute: "columnsBackgroundColor", onUpdate: onUpdate })));
15 | };
16 | export default RowProperty;
17 | //# sourceMappingURL=RowProperty.js.map
--------------------------------------------------------------------------------
/src/containers/common/Selector.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classnames from 'classnames';
3 |
4 | class Selector extends React.Component {
5 |
6 | dragDom: HTMLDivElement;
7 |
8 | componentDidMount() {
9 | const { onRef = () => { } } = this.props;
10 | if (this.dragDom) {
11 | onRef(this.dragDom);
12 | }
13 | }
14 | render() {
15 | const { placeholder = "Row", type = "row", onDelete = () => { }, onCopy = () => { } } = this.props;
16 | return
17 |
{placeholder}
18 |
{ this.dragDom = dom; }}
20 | className={classnames("ds-layer-drag", type === 'row' ? 'ds-layer-drag-rows' : 'ds-layer-drag-contents')}
21 | >
22 |
23 |
24 |
36 |
29 |
30 |
31 | |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |