github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-04-19 20:08:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 移除 @ali/lowcode-editor-setters 大包

Browse Source
This commit is contained in:
zude.hzd 2020-12-04 14:26:30 +08:00
parent e8b172cc80
commit 747c3f11d6
255 changed files with 0 additions and 10852 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

580
packages/editor-setters/CHANGELOG.md
View File

@ -1,580 +0,0 @@
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="1.0.22"></a>
## [1.0.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.21...@ali/lowcode-editor-setters@1.0.22) (2020-11-16)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.21"></a>
## [1.0.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.20...@ali/lowcode-editor-setters@1.0.21) (2020-11-10)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.20"></a>
## [1.0.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.19...@ali/lowcode-editor-setters@1.0.20) (2020-11-10)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.19"></a>
## [1.0.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.18...@ali/lowcode-editor-setters@1.0.19) (2020-11-05)
### Bug Fixes
* 修改style-setter报错,loadAsyncLib 判断 ([7fe793a](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7fe793a))
<a name="1.0.18"></a>
## [1.0.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.17...@ali/lowcode-editor-setters@1.0.18) (2020-11-05)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.17"></a>
## [1.0.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.16...@ali/lowcode-editor-setters@1.0.17) (2020-11-05)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.16"></a>
## [1.0.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.15...@ali/lowcode-editor-setters@1.0.16) (2020-11-04)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.15"></a>
## [1.0.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.13...@ali/lowcode-editor-setters@1.0.15) (2020-11-04)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.14"></a>
## [1.0.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.13...@ali/lowcode-editor-setters@1.0.14) (2020-11-04)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.13"></a>
## [1.0.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.12...@ali/lowcode-editor-setters@1.0.13) (2020-11-02)
### Bug Fixes
* 修复编辑器转化bug,增加窗口最大最小化功能 ([05666af](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/05666af))
### Features
* style 迁移 ([6ce97da](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/6ce97da))
<a name="1.0.12"></a>
## [1.0.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.11...@ali/lowcode-editor-setters@1.0.12) (2020-10-20)
### Bug Fixes
* 合并分支 ([add2f23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/add2f23))
* fix function bug ([ab151df](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/ab151df))
<a name="1.0.11"></a>
## [1.0.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.10...@ali/lowcode-editor-setters@1.0.11) (2020-10-19)
### Bug Fixes
* 将monaco基础包全部移除，采用cdn形式注入 ([510f1c0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/510f1c0))
<a name="1.0.10"></a>
## [1.0.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.9...@ali/lowcode-editor-setters@1.0.10) (2020-09-29)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.9"></a>
## [1.0.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.8...@ali/lowcode-editor-setters@1.0.9) (2020-09-28)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.8"></a>
## [1.0.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.8-0...@ali/lowcode-editor-setters@1.0.8) (2020-09-28)
### Bug Fixes
* source-editor bug & exp-setter bug ([5cd88d4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/5cd88d4))
### Features
* 新增class-name setter ([a9f1131](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/a9f1131))
<a name="1.0.8-0"></a>
## [1.0.8-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.21...@ali/lowcode-editor-setters@1.0.8-0) (2020-09-09)
### Bug Fixes
* 合并master分支 ([bd2c6ad](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/bd2c6ad))
* 清理代码依赖及版本 ([0b15d30](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0b15d30))
* 适配Nav组件 ([7e9829f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7e9829f))
* fix function-setter bug ([dced647](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/dced647))
* fix function-setter bug ([8fd77df](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/8fd77df))
* fix NextTable callback function ([ce77375](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/ce77375))
### Features
* 新增事件入参功能 ([0614fa7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0614fa7))
* 新增functionSetter ([9359ac6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/9359ac6))
* add function setter ([114b6b0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/114b6b0))
* add style-setters ([99b1d84](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/99b1d84))
* setting-pane 新增removeProp 函数 ([b97c807](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b97c807))
* tree 组件修改 ([7efa52f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7efa52f))
<a name="1.0.7-0"></a>
## [1.0.7-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.6-0...@ali/lowcode-editor-setters@1.0.7-0) (2020-09-02)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.6-0"></a>
## [1.0.6-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.19...@ali/lowcode-editor-setters@1.0.6-0) (2020-09-02)
<a name="0.9.21"></a>
## [0.9.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.20...@ali/lowcode-editor-setters@0.9.21) (2020-09-03)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.20"></a>
## [0.9.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.19...@ali/lowcode-editor-setters@0.9.20) (2020-09-03)
### Bug Fixes
* 合并master分支 ([bd2c6ad](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/bd2c6ad))
* 清理代码依赖及版本 ([0b15d30](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0b15d30))
* 适配Nav组件 ([7e9829f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7e9829f))
* fix function-setter bug ([dced647](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/dced647))
* fix function-setter bug ([8fd77df](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/8fd77df))
* fix NextTable callback function ([ce77375](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/ce77375))
### Features
* 新增事件入参功能 ([0614fa7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0614fa7))
* 新增functionSetter ([9359ac6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/9359ac6))
* add function setter ([114b6b0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/114b6b0))
* add style-setters ([99b1d84](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/99b1d84))
* setting-pane 新增removeProp 函数 ([b97c807](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b97c807))
* tree 组件修改 ([7efa52f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7efa52f))
<a name="1.0.5-0"></a>
## [1.0.5-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.4-0...@ali/lowcode-editor-setters@1.0.5-0) (2020-08-20)
<a name="0.9.19"></a>
## [0.9.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.18...@ali/lowcode-editor-setters@0.9.19) (2020-08-27)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.18"></a>
## [0.9.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.17...@ali/lowcode-editor-setters@0.9.18) (2020-08-24)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.17"></a>
## [0.9.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.16...@ali/lowcode-editor-setters@0.9.17) (2020-08-20)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.4-0"></a>
## [1.0.4-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.3-0...@ali/lowcode-editor-setters@1.0.4-0) (2020-08-20)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.3-0"></a>
## [1.0.3-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.2-0...@ali/lowcode-editor-setters@1.0.3-0) (2020-08-20)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.2-0"></a>
## [1.0.2-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@1.0.1-0...@ali/lowcode-editor-setters@1.0.2-0) (2020-08-20)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="1.0.1-0"></a>
## [1.0.1-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.16...@ali/lowcode-editor-setters@1.0.1-0) (2020-08-20)
### Bug Fixes
* fix function-setter bug ([8fd77df](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/8fd77df))
### Features
* add function setter ([114b6b0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/114b6b0))
* add style-setters ([99b1d84](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/99b1d84))
* setting-pane 新增removeProp 函数 ([b97c807](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b97c807))
* 新增functionSetter ([9359ac6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/9359ac6))
<a name="1.0.0"></a>
# [1.0.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.14.0...@ali/lowcode-editor-setters@1.0.0) (2020-08-17)
<a name="0.9.16"></a>
## [0.9.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.15...@ali/lowcode-editor-setters@0.9.16) (2020-08-19)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.14.0"></a>
# [0.14.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.13.0...@ali/lowcode-editor-setters@0.14.0) (2020-08-17)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.13.0"></a>
# [0.13.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.11.0...@ali/lowcode-editor-setters@0.13.0) (2020-08-17)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.12.0"></a>
# [0.12.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.11.0...@ali/lowcode-editor-setters@0.12.0) (2020-08-17)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.11.0"></a>
# [0.11.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.10.0...@ali/lowcode-editor-setters@0.11.0) (2020-08-16)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.10.0"></a>
# [0.10.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.14...@ali/lowcode-editor-setters@0.10.0) (2020-08-14)
### Features
* add style-setters ([99b1d84](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/99b1d84))
<a name="0.9.14"></a>
## [0.9.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.13...@ali/lowcode-editor-setters@0.9.14) (2020-08-04)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.13"></a>
## [0.9.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.11...@ali/lowcode-editor-setters@0.9.13) (2020-08-04)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.12"></a>
## [0.9.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.11...@ali/lowcode-editor-setters@0.9.12) (2020-08-04)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.11"></a>
## [0.9.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.10...@ali/lowcode-editor-setters@0.9.11) (2020-07-28)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.10"></a>
## [0.9.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.9...@ali/lowcode-editor-setters@0.9.10) (2020-07-22)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.9"></a>
## [0.9.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.8...@ali/lowcode-editor-setters@0.9.9) (2020-07-21)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.8"></a>
## [0.9.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.7...@ali/lowcode-editor-setters@0.9.8) (2020-07-21)
### Bug Fixes
* rename MixinSetter to MixedSetter ([0e9a740](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0e9a740))
<a name="0.9.7"></a>
## [0.9.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.6...@ali/lowcode-editor-setters@0.9.7) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.6"></a>
## [0.9.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.5...@ali/lowcode-editor-setters@0.9.6) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.5"></a>
## [0.9.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.4...@ali/lowcode-editor-setters@0.9.5) (2020-06-23)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.4"></a>
## [0.9.4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.3...@ali/lowcode-editor-setters@0.9.4) (2020-06-23)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.3"></a>
## [0.9.3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.2...@ali/lowcode-editor-setters@0.9.3) (2020-06-15)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.2"></a>
## [0.9.2](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.1...@ali/lowcode-editor-setters@0.9.2) (2020-05-20)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.1"></a>
## 0.9.1 (2020-05-18)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.8.15"></a>
## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.14...@ali/lowcode-setters@0.8.15) (2020-05-15)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.14"></a>
## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.13...@ali/lowcode-setters@0.8.14) (2020-05-13)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.13"></a>
## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.12...@ali/lowcode-setters@0.8.13) (2020-05-08)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.12"></a>
## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.11...@ali/lowcode-setters@0.8.12) (2020-05-07)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.11"></a>
## [0.8.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.10...@ali/lowcode-setters@0.8.11) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.10"></a>
## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.9...@ali/lowcode-setters@0.8.10) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.9"></a>
## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.8...@ali/lowcode-setters@0.8.9) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.8"></a>
## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.7...@ali/lowcode-setters@0.8.8) (2020-04-16)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.7"></a>
## [0.8.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.6...@ali/lowcode-setters@0.8.7) (2020-04-15)
### Features
* mixin-setter get all setter ([eaa84d2](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/eaa84d2))
* mixin-setter get all setter ([a5eb62d](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/a5eb62d))
<a name="0.8.6"></a>
## [0.8.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.5...@ali/lowcode-setters@0.8.6) (2020-03-31)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.5"></a>
## [0.8.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.4...@ali/lowcode-setters@0.8.5) (2020-03-30)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.4"></a>
## [0.8.4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.3...@ali/lowcode-setters@0.8.4) (2020-03-30)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.3"></a>
## [0.8.3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.2...@ali/lowcode-setters@0.8.3) (2020-03-30)
**Note:** Version bump only for package @ali/lowcode-setters
<a name="0.8.2"></a>
## 0.8.2 (2020-03-30)
### Bug Fixes
* ts type ([1732e7d](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/1732e7d))
<a name="0.8.1"></a>
## 0.8.1 (2020-03-30)
### Bug Fixes
* ts type ([1732e7d](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/1732e7d))

140
packages/editor-setters/README.md
View File

@ -1,140 +0,0 @@
通用设置器
## 使用文档
- name：绑定props属性key，类型为string
- setter：setter组件内容，类型可以为string或object，当为string时，指setter名，当为object时：
- componentName：setter名，类型为string
- props：setter属性，类型为object
## 使用demo
```
{
"name": "TextAreaSetter",
"setter": "TextAreaSetter"
}, {
"name": "date",
"title": "测试日期",
"setter": "DateSetter"
}, {
"name": "date",
"title": "测试日期-年",
"setter": "DateYearSetter"
}, {
"name": "date",
"title": "测试日期-月",
"setter": "DateMonthSetter"
}, {
"name": "date",
"title": "测试日期-区间",
"setter": "DateRangeSetter"
}, {
"name": "mode",
"title": "选择器模式",
"setter": {
"componentName": "RadioGroupSetter",
"props": {
"defaultValue": "single",
"dataSource": [{
"value": "single",
"label": "single"
}, {
"value": "multiple",
"label": "multiple"
}, {
"value": "tag",
"label": "tag"
}]
}
}
}, {
"name": "mode",
"title": "选择器模式",
"setter": {
"componentName": "SelectSetter",
"props": {
"defaultValue": "single",
"dataSource": [{
"value": "single",
"label": "single"
}, {
"value": "multiple",
"label": "multiple"
}, {
"value": "tag",
"label": "tag"
}]
}
}
}, {
"name": "value",
"title": "受控值",
"setter": "StringSetter"
}, {
"name": "hasBorder",
"title": "是否有边框",
"setter": {
"componentName": "BoolSetter",
"props": {
"defaultValue": true
}
}
}, {
"name": "maxTagCount",
"title": "最多显示多少个 tag",
"setter": "NumberSetter"
}, {
"name": "maxTagCount",
"title": "最多显示多少个 tag",
"setter": "ExpressionSetter"
}, {
"name": "color",
"title": "颜色选择",
"setter": "ColorSetter"
}, {
"name": "json",
"title": "JSON设置",
"setter": "JsonSetter"
}, {
"name": "MixinSetter",
"placeholder": "混合",
"setter": {
"componentName": "MixinSetter",
"props": {
"types": [{
"name": "StringSetter",
"props": {}
}, {
"name": "TextAreaSetter",
"props": {}
}, {
"name": "SelectSetter",
"props": {
"hasClear": true,
"dataSource": [{
"label": "上",
"value": "t"
}, {
"label": "右",
"value": "r"
}, {
"label": "下",
"value": "b"
}, {
"label": "左",
"value": "l"
}],
"defaultValue": "l"
}
}, {
"name": "NumberSetter",
"props": {
"defaultValue": 5
}
}, {
"name": "BoolSetter",
"props": {}
}],
"defaultType": "SelectSetter"
}
}
```

9
packages/editor-setters/build.json
View File

@ -1,9 +0,0 @@
{
"plugins": [
"build-plugin-component",
"build-plugin-fusion",
["build-plugin-moment-locales", {
"locales": ["zh-cn"]
}]
]
}

73
packages/editor-setters/package.json
View File

@ -1,73 +0,0 @@
{
"name": "@ali/lowcode-editor-setters",
"version": "1.0.22",
"description": "Builtin setters for Ali lowCode engine",
"files": [
"es",
"lib"
],
"main": "lib/index.js",
"module": "es/index.js",
"scripts": {
"build": "build-scripts build --skip-demo",
"test": "ava",
"test:snapshot": "ava --update-snapshots"
},
"dependencies": {
"@ali/intl-universal": "^0.4.9",
"@ali/lc-style-setter": "0.0.2",
"@ali/lowcode-editor-core": "^1.0.22",
"@ali/ve-choice-control": "^4.0.0",
"@ali/ve-code-control": "^4.0.0",
"@ali/ve-color-control": "^4.0.0",
"@ali/ve-field": "^4.2.0-beta.8",
"@ali/ve-icons": "^4.1.9",
"@ali/ve-image-control": "^4.0.0",
"@ali/ve-less-variables": "^2.0.0",
"@ali/ve-number-control": "^4.0.0",
"@ali/ve-select-control": "^4.0.0",
"@ali/ve-text-control": "^4.0.0",
"@ali/vs-style-select": "0.0.1-beta.8",
"@ali/vu-css-style": "^1.0.2",
"@ali/vu-icon-base": "^1.0.2",
"@alifd/next": "^1.19.16",
"acorn": "^6.4.1",
"classnames": "^2.2.6",
"css-border-property": "^1.1.0",
"css-color-names": "0.0.4",
"intl-messageformat": "^9.3.1",
"lodash.curry": "^4.1.1",
"lodash.flow": "^3.5.0",
"lodash.throttle": "^4.1.1",
"lodash.zipobject": "^4.1.3",
"parse-css-font": "^2.0.2",
"postcss-value-parser": "^3.3.0",
"qs": "^6.9.1",
"react": "^16",
"react-dom": "^16.7.0",
"react-monaco-editor": "0.40.0"
},
"devDependencies": {
"@alib/build-scripts": "^0.1.18",
"@types/classnames": "^2.2.7",
"@types/node": "^13.7.1",
"@types/react": "^16",
"@types/react-dom": "^16",
"build-plugin-component": "^0.2.10",
"build-plugin-fusion": "^0.1.0",
"build-plugin-moment-locales": "^0.1.0"
},
"ava": {
"compileEnhancements": false,
"snapshotDir": "test/fixtures/__snapshots__",
"extensions": [
"ts"
],
"require": [
"ts-node/register"
]
},
"publishConfig": {
"registry": "https://registry.npm.alibaba-inc.com"
}
}

90
packages/editor-setters/src/classname-setter/index.tsx
View File

@ -1,90 +0,0 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Select } from '@alife/next';
interface Color {
rgb: any;
onChange: () => void;
}
export interface PluginProps {
value: string;
onChange: any;
}
export default class ClassNameView extends PureComponent<PluginProps> {
static display = 'ClassName';
static propTypes = {
onChange: PropTypes.func,
value: PropTypes.string,
};
static defaultProps = {
onChange: () => {},
value: '',
};
getClassNameList = () => {
const { editor } = this.props.field;
const schema = editor.get('designer').project.getSchema();
const css = schema.componentsTree[0].css;
const classNameList = [];
const re = /\.?\w+[^{]+\{[^}]*\}/g;
const list = css.match(re);
list.map((item) => {
if (item[0] === '.') {
const className = item.substring(1, item.indexOf('{'));
classNameList.push(className);
}
return item;
});
return classNameList;
};
handleChange = (value) => {
const { onChange } = this.props;
onChange(value.join(' '));
this.setState({
selectValue: value,
});
};
// eslint-disable-next-line react/no-deprecated
componentWillMount() {
const { value } = this.props;
const classnameList = this.getClassNameList();
const dataSource = [];
classnameList.map((item) => {
dataSource.push({
value: item,
label: item,
});
return item;
});
let selectValue = [];
if (value && value !== '') {
selectValue = value.split(' ');
}
this.setState({
dataSource,
selectValue,
});
}
render() {
const { dataSource, selectValue } = this.state;
return (
<Select aria-label="tag mode" mode="tag" dataSource={dataSource} onChange={this.handleChange} value={selectValue} />
);
}
}

35
packages/editor-setters/src/color-setter/index.scss
View File

@ -1,35 +0,0 @@
// color-setter
.lowcode-color-box {
margin-right: -5px;
padding: 3px 0 3px 3px;
width: 26px;
height: 26px;
display: inline-block;
div {
width: 20px;
height: 20px;
border: 1px solid #ddd;
}
}
.next-balloon-normal.lowcode-color-content {
padding: 0;
background: #ffffff;
border-radius: 0;
border: 1px solid #e5e5e5;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
&:after {
display: none;
}
.sketch-picker {
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
.flexbox-fix {
input {
width: 100% !important;
min-width: 30px;
text-align: center;
}
}
}
}

97
packages/editor-setters/src/color-setter/index.tsx
View File

@ -1,97 +0,0 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { SketchPicker } from 'react-color';
import { Input, Balloon } from '@alife/next';
import './index.scss';
interface Color {
rgb: any;
onChange: () => void;
}
export interface PluginProps {
value: string;
onChange: any;
}
export default class ColorPickerView extends PureComponent<PluginProps> {
static display = 'ColorPicker';
static propTypes = {
onChange: PropTypes.func,
value: PropTypes.string,
};
static defaultProps = {
onChange: () => {},
value: '',
};
constructor(props: Readonly<{ value: string; defaultValue: string }>) {
super(props);
this.state = {
value: props.value || props.defaultValue,
};
}
static getDerivedStateFromProps(props: { value: string }, state: { preValue: string }) {
if (props.value != state.preValue) {
return {
preValue: props.value,
value: props.value,
};
}
return null;
}
onChangeComplete = (color: Color): void => {
let value;
if (color.rgb.a < 1) {
const { rgb } = color;
const rgba = [rgb.r, rgb.g, rgb.b, rgb.a];
value = `rgba(${rgba.join(',')})`;
} else {
value = color.hex;
}
this.setState({
value,
});
this.props.onChange && this.props.onChange(value);
};
onInputChange = (value: string): void => {
if (/^[0-9a-zA-Z]{6}$/.test(value)) value = `#${ value}`;
this.setState({
value,
});
this.props.onChange && this.props.onChange(value);
};
render(): React.ReactNode {
const { value, onChange, ...restProps } = this.props;
const boxStyle = {
backgroundColor: this.state.value,
};
const triggerNode = (
<div className="lowcode-color-box">
<div style={boxStyle} />
</div>
);
const InnerBeforeNode = (
<Balloon
className={'lowcode-color-content'}
trigger={triggerNode}
needAdjust
triggerType="click"
closable={false}
alignEdge="edge"
offset={[-3, -6]}
>
<SketchPicker onChangeComplete={this.onChangeComplete} color={this.state.value} arrowPointAtCenter />
</Balloon>
);
return (
<Input {...restProps} innerBefore={InnerBeforeNode} onChange={this.onInputChange} value={this.state.value} />
);
}
}

90
packages/editor-setters/src/events-setter/index.scss
View File

@ -1,90 +0,0 @@
.event-body {
padding: 0 10px 0 10px;
position: relative;
min-height: 450px;
.event-title {
height: 30px;
line-height: 30px;
margin-bottom: 10px;
}
.next-radio-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.next-table td .next-table-cell-wrapper{
padding: 12px 10px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.next-radio-group label {
-webkit-box-flex: 1;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.event-cell {
padding-left: 25px;
position: relative;
font-size: 12px;
}
.event-type-tag {
position: absolute;
width: 20px;
height: 20px;
left: 0px;
top: -2px;
border-radius: 50%;
line-height: 20px;
text-align: center;
color: #ffffff;
background-color: #2077ff;
}
.related-icon {
margin-right: 5px;
}
.related-event-name {
color: #2077ff;
cursor: pointer;
}
.event-menu {
max-height: 300px;
width: 256px;
overflow-x: hidden;
position: absolute;
top: 67px;
left: 10px;
z-index: 10;
}
.event-table {
margin-top: 20px;
}
.event-operate-icon {
cursor: pointer;
}
.event-operate-icon:hover {
color: #0079f2;
}
}

464
packages/editor-setters/src/events-setter/index.tsx
View File

@ -1,464 +0,0 @@
import { Component } from 'react';
import { Radio, Menu, Table, Icon } from '@alifd/next';
import nativeEvents from './native-events';
import './index.scss';
const { Item, Group } = Menu;
const RadioGroup = Radio.Group;
const EVENT_CONTENTS = {
COMPONENT_EVENT: 'componentEvent',
NATIVE_EVENT: 'nativeEvent',
LIFE_CYCLE_EVENT: 'lifeCycleEvent',
};
const DEFINITION_EVENT_TYPE = {
EVENTS: 'events',
NATIVE_EVENTS: 'nativeEvents',
LIFE_CYCLE_EVENT: 'lifeCycleEvent',
};
const SETTER_NAME = 'event-setter';
export default class EventsSetter extends Component<{
value: any[];
onChange: (eventList: any[]) => void;
}> {
state = {
eventBtns: [],
eventList: [],
selectType: null,
nativeEventList: [],
lifeCycleEventList: [],
eventDataList: (this.props?.value?.eventDataList ? this.props.value.eventDataList : this.props?.value) || [],
};
// constructor (){
// super();
// debugger;
// // if (!this.props || !this.props.value){
// // this.setState({
// // eventDataList:[]
// // })
// // }
// }
// static getDerivedStateFromProps(nextProps, prevState) {
// debugger;
// // const { value } = nextProps;
// // debugger;
// // if (value !== prevState.eventDataList) {
// // return {
// // value,
// // };
// // }
// return null;
// }
private bindEventName: string;
componentDidMount() {
console.log(this.state.eventDataList);
const { editor } = this.props.field;
this.initEventBtns();
this.initEventList();
editor.on(`${SETTER_NAME}.bindEvent`, (relatedEventName, paramStr) => {
this.bindEvent(relatedEventName, paramStr);
});
}
/**
* 初始化事件按钮
*/
initEventBtns() {
const { definition } = this.props;
let isRoot = false;
let isCustom = false;
let eventBtns = [];
definition.map(item => {
if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT) {
isRoot = true;
}
if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
isCustom = true;
}
return item;
});
if (isRoot) {
eventBtns = [
{
value: EVENT_CONTENTS.LIFE_CYCLE_EVENT,
label: '生命周期',
},
];
} else if (isCustom) {
eventBtns = [
{
value: EVENT_CONTENTS.COMPONENT_EVENT,
label: '组件自带事件',
},
];
} else {
eventBtns = [
{
value: EVENT_CONTENTS.NATIVE_EVENT,
label: '原生事件',
},
];
}
this.setState({
eventBtns,
});
}
initEventList() {
const { definition } = this.props;
let nativeEventList = [];
definition.map(item => {
if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
this.checkEventListStatus(item.list, DEFINITION_EVENT_TYPE.EVENTS);
this.setState({
eventList: item.list,
});
}
if (item.type === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
this.checkEventListStatus(
item.list,
DEFINITION_EVENT_TYPE.NATIVE_EVENTS,
);
nativeEventList = item.list;
}
if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT) {
this.checkEventListStatus(
item.list,
DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT,
);
this.setState({
lifeCycleEventList: item.list,
});
}
return item;
});
if (nativeEventList.length == 0) {
nativeEventList = nativeEvents;
this.setState({
nativeEventList,
});
}
}
checkEventListStatus = (eventList: any[], eventType: string) => {
const { eventDataList } = this.state;
if (
eventType === DEFINITION_EVENT_TYPE.EVENTS ||
eventType === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT
) {
eventList.map(item => {
item.disabled = false;
eventDataList.map(eventDataItem => {
if (item.name === eventDataItem.name) {
item.disabled = true;
}
return eventDataItem;
});
return item;
});
} else if (eventType === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
eventDataList.map(eventDataItem => {
eventList.map(item => {
item.eventList.map(eventItem => {
if (eventItem.name === eventDataItem.name) {
item.disabled = true;
} else {
item.disabled = false;
}
return eventItem;
});
return item;
});
return eventDataItem;
});
}
};
/**
* 渲染事件信息
*/
renderEventInfoCell = (value, index, record) => {
let eventTagText = '';
if (record.type === EVENT_CONTENTS.NATIVE_EVENT) {
eventTagText = '原';
} else if (record.type === EVENT_CONTENTS.COMPONENT_EVENT) {
eventTagText = '组';
} else if (record.type === EVENT_CONTENTS.LIFE_CYCLE_EVENT) {
eventTagText = '生';
}
return (
<div>
<div className="event-cell">
<div className="event-type-tag">{eventTagText}</div>
{record.name}
</div>
<div className="event-cell" style={{ marginTop: '8px' }}>
<Icon type="attachment" size="small" className="related-icon" />
<span className="related-event-name" onClick={() => this.onRelatedEventNameClick(record.relatedEventName)}>
{record.relatedEventName || ''}
</span>
</div>
</div>
);
};
/**
* 渲染事件操作项
*/
renderEventOperateCell = (eventName: string) => {
return (
<div>
<Icon
type="set"
className="event-operate-icon"
style={{ marginLeft: '3px', marginRight: '4px' }}
onClick={() => this.openDialog(eventName)}
/>
<Icon
type="ashbin"
className="event-operate-icon"
onClick={() => this.openDeleteEventDialog(eventName)}
/>
</div>
);
};
updateEventListStatus = (eventName: string, unDisabled: boolean) => {
const { eventList, nativeEventList, lifeCycleEventList } = this.state;
eventList.map(item => {
if (item.name === eventName) {
item.disabled = !unDisabled;
}
return item;
});
lifeCycleEventList.map(item => {
if (item.name === eventName) {
item.disabled = !unDisabled;
}
return item;
});
nativeEventList.map(item => {
item.eventList.map(itemData => {
if (itemData.name === eventName) {
itemData.disabled = !unDisabled;
}
return itemData;
});
return item;
});
};
onRadioChange = value => {
this.setState({
selectType: value,
});
};
onEventMenuClick = (eventName: string) => {
const { selectType, eventDataList } = this.state;
eventDataList.push({
type: selectType,
name: eventName,
});
this.setState({
eventDataList,
});
this.updateEventListStatus(eventName);
this.closeEventMenu();
this.openDialog(eventName);
};
onRelatedEventNameClick = (eventName: string) => {
const { editor } = this.props.field;
editor.get('skeleton').getPanel('sourceEditor').show();
setTimeout(() => {
editor.emit('sourceEditor.focusByFunction', {
functionName: eventName,
});
}, 300);
// editor.emit('sourceEditor.focusByFunction',{
// functionName:eventName
// })
};
closeEventMenu = () => {
if (this.state.selectType !== null) {
this.setState({
selectType: null,
});
}
};
openDeleteEventDialog = (eventName: string) => {
this.deleteEvent(eventName);
// Dialog.confirm({
// title: '删除事件',
// content: '确定删除当前事件吗',
// onOk: () => this.deleteEvent(eventName),
// });
};
deleteEvent = (eventName: string) => {
const { eventDataList, eventList } = this.state;
eventDataList.map((item, index) => {
if (item.name === eventName) {
eventDataList.splice(index, 1);
}
return item;
});
this.setState({
eventDataList,
});
this.props.onChange({ eventDataList, eventList });
this.updateEventListStatus(eventName, true);
};
openDialog = (bindEventName: string) => {
const { editor } = this.props.field;
const { eventDataList } = this.state;
let paramStr;
eventDataList.map((item) => {
if (item.name == bindEventName) {
paramStr = item.paramStr;
}
return item;
});
this.bindEventName = bindEventName;
editor.emit('eventBindDialog.openDialog', bindEventName, SETTER_NAME, paramStr);
};
bindEvent = (relatedEventName: string, paramStr: string) => {
const { eventDataList, eventList } = this.state;
eventDataList.map(item => {
if (item.name === this.bindEventName) {
item.relatedEventName = relatedEventName;
if (paramStr) {
item.paramStr = paramStr;
}
}
return item;
});
this.setState({
eventDataList,
});
this.props.onChange({ eventDataList, eventList });
// this.closeDialog();
};
render() {
const {
eventBtns,
eventList,
nativeEventList,
lifeCycleEventList,
selectType,
eventDataList,
} = this.state;
const showEventList =
lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList;
return (
<div className="lc-block-setter event-body" onClick={this.closeEventMenu}>
<div className="event-title">
{
eventBtns.length > 1 ? <span>点击选择事件类型</span> : <span>点击绑定事件</span>
}
</div>
<RadioGroup
dataSource={eventBtns}
shape="button"
size="medium"
value={selectType}
onChange={this.onRadioChange}
style={{ width: '100%' }}
/>
{selectType && selectType != EVENT_CONTENTS.NATIVE_EVENT && (
<Menu
defaultOpenKeys="sub-menu"
className="event-menu"
onItemClick={this.onEventMenuClick}
>
{showEventList.map((item) => (
<Item
key={item.name}
helper={item.description}
disabled={item.disabled}
>
{item.name}
</Item>
))}
</Menu>
)}
{selectType && selectType === EVENT_CONTENTS.NATIVE_EVENT && (
<Menu
defaultOpenKeys="sub-menu"
className="event-menu"
onItemClick={this.onEventMenuClick}
>
{nativeEventList.map((item, index) => (
<Group label={item.name} key={index}>
{item.eventList.map(groupItem => (
<Item key={groupItem.name} disabled={groupItem.disabled}>
{groupItem.name}
</Item>
))}
</Group>
))}
</Menu>
)}
<div className="event-table">
<Table dataSource={eventDataList} size="small">
<Table.Column title="已有事件" cell={this.renderEventInfoCell} />
<Table.Column
title="操作"
dataIndex="name"
cell={this.renderEventOperateCell}
width={70}
/>
</Table>
</div>
</div>
);
}
}

56
packages/editor-setters/src/events-setter/native-events.ts
View File

@ -1,56 +0,0 @@
export default [
{
category: 'commonlyEvent',
name: '常用事件',
eventList: [
{ name: 'onClick' },
{ name: 'onChange' },
{ name: 'onInput' },
{ name: 'onSelect' },
{ name: 'onSubmit' },
{ name: 'onReset' },
{ name: 'onFocus' },
{ name: 'onBlur' },
{ name: 'onScroll' },
{ name: 'onLoad' },
{ name: 'onError' },
],
},
{
category: 'keybordEvent',
name: '键盘事件',
eventList: [{ name: 'onKeyDown' }, { name: 'onKeyPress' }, { name: 'onKeyUp' }],
},
{
category: 'mouseEvent',
name: '鼠标事件',
eventList: [
{ name: 'onDoubleClick' },
{ name: 'onDrag' },
{ name: 'onDragEnd' },
{ name: 'onDragEnter' },
{ name: 'onDragExit' },
{ name: 'onDragLeave' },
{ name: 'onDragOver' },
{ name: 'onDragStart' },
{ name: 'onDrop' },
{ name: 'onMouseDown' },
{ name: 'onMouseEnter' },
{ name: 'onMouseLeave' },
{ name: 'onMouseMove' },
{ name: 'onMouseOut' },
{ name: 'onMouseOver' },
{ name: 'onMouseUp' },
],
},
{
category: 'animateEvent',
name: '动画事件',
eventList: [
{ name: 'onAnimationStart' },
{ name: 'onAnimationEnd' },
{ name: 'onAnimationItration' },
{ name: 'onTransitionEnd' },
],
},
];

17
packages/editor-setters/src/expression-setter/index.scss
View File

@ -1,17 +0,0 @@
.expression-setter-item-inner {
.next-menu-item-text {
vertical-align: middle;
display: flex;
justify-content: space-between;
}
.next-menu-item {
padding: 0 10px;
}
}
.code-input-value {
float: left;
}
.code-input-help {
float: right;
color: #6897f2;
}

349
packages/editor-setters/src/expression-setter/index.tsx
View File

@ -1,349 +0,0 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Select, Balloon } from '@alife/next';
import * as acorn from 'acorn';
import { isJSExpression, generateI18n } from './locale/utils';
import zhCN from './locale/zh-CN';
import './index.scss';
const { Option, AutoComplete } = Select;
const { Tooltip } = Balloon;
const helpMap = {
this: '容器上下文对象',
state: '容器的state',
props: '容器的props',
context: '容器的context',
schema: '页面上下文对象',
component: '组件上下文对象',
constants: '应用常量对象',
utils: '应用工具对象',
dataSourceMap: '容器数据源Map',
field: '表单Field对象',
};
export default class ExpressionView extends PureComponent {
static displayName = 'Expression';
static propTypes = {
context: PropTypes.object,
dataSource: PropTypes.array,
locale: PropTypes.string,
messages: PropTypes.object,
onChange: PropTypes.func,
placeholder: PropTypes.string,
value: PropTypes.string,
};
static defaultProps = {
context: {},
dataSource: [],
locale: 'zh-CN',
messages: zhCN,
onChange: () => {},
placeholder: '',
value: '',
};
expression: React.RefObject<unknown>;
i18n: any;
t: void;
$input: any;
listenerFun: ((event: any) => void) | undefined;
static getInitValue(val: { value: any; match: (arg0: RegExp) => any; }) {
if (isJSExpression(val)) {
if (typeof val === 'object') {
return val.value;
} else if (typeof val === 'string') {
const arr = val.match(/^\{\{(.*?)\}\}$/);
if (arr) return arr[1];
}
}
return val;
}
constructor(props: any) {
super(props);
this.expression = React.createRef();
this.i18n = generateI18n(props.locale, props.messages);
this.state = {
value: ExpressionView.getInitValue(props.value),
dataSource: props.dataSource || [],
};
}
static getDerivedStateFromProps(props: { value: any; }, state: { preValue: any; }) {
const curValue = ExpressionView.getInitValue(props.value);
if (curValue !== state.preValue) {
return {
preValue: curValue,
value: curValue,
};
}
return null;
}
onChange(value: string) {
const realInputValue = value;
const realDataSource = null;
let nextCursorIndex: number;
// 更新值
// if (actionType === 'itemClick' || actionType === 'enter') {
// // const curValue = this.state.value;
// // if (curValue) {
// // realInputValue = curValue + realInputValue;
// // }
// }
// 更新数据源
const newState = {
value: realInputValue,
};
if (realDataSource !== null) newState.dataSource = realDataSource;
this.setState(newState, () => {
nextCursorIndex && this.setInputCursorPosition(nextCursorIndex);
});
// 默认加上变量表达式
this.t && clearTimeout(this.t);
this.t = setTimeout(() => {
const { onChange } = this.props;
// realInputValue = realInputValue ? `{{${realInputValue}}}` : undefined;
onChange && onChange({
type: 'JSExpression',
value: realInputValue,
});
}, 300);
}
/**
* 获取AutoComplete数据源
* @param {String}
* @return {Array}
*/
getDataSource(): any[] {
const { editor } = this.props.field;
const schema = editor.get('designer').project.getSchema();
const stateMap = schema.componentsTree[0].state;
const dataSource = [];
for (const key in stateMap) {
dataSource.push(`this.state.${key}`);
}
return dataSource;
}
/**
* 获取光标前的对象字符串，语法解析获取对象字符串
* @param {String} str 模板字符串
* @return {String} 光标前的对象字符串
*/
getCurrentFiled(str: string | any[]) {
str += 'x'; // .后面加一个x字符，便于acorn解析
try {
const astTree = acorn.parse(str);
const right = astTree.body[0].expression.right || astTree.body[0].expression;
if (right.type === 'MemberExpression') {
const { start, end } = right;
str = str.slice(start, end);
return { str, start, end };
}
} catch (e) {
return null;
}
}
/**
* 获取输入的上下文信息
* @param {Array}
* @return {Array}
*/
getContextKeys(keys: []) {
const { editor } = this.props.field;
console.log(editor);
const limitKeys = ['schema', 'utils', 'constants'];
if (keys.length === 0) return limitKeys;
if (!limitKeys.includes(keys[0])) return [];
let result = [];
let keyValue = editor;
let assert = false;
keys.forEach(item => {
if (!keyValue[item] || typeof keyValue[item] !== 'object') {
assert = true;
}
if (keyValue[item]) {
keyValue = keyValue[item];
}
});
if (assert) return [];
result = Object.keys(keyValue);
return result;
// return utilsKeys.concat(constantsKeys).concat(schemaKeys);
}
/* 过滤key */
filterKey(obj: any, name: string) {
const filterKeys = [
'reloadDataSource',
'REACT_HOT_LOADER_RENDERED_GENERATION',
'refs',
'updater',
'appHelper',
'isReactComponent',
'forceUpdate',
'setState',
'isPureReactComponent',
];
const result = [];
for (const key in obj) {
if (key.indexOf('_') !== 0 && filterKeys.indexOf(key) === -1) {
result.push(`${name}.${key}`);
}
}
return result;
}
/**
* 根据输入项进行筛选
* @param {String}
* @param {String}
* @return {Boolen}
*/
filterOption(inputValue: string, item: { value: string | any[]; }) {
const cursorIndex = this.getInputCursorPosition();
const preStr = inputValue.substr(0, cursorIndex);
const lastKey: string[] = preStr.split('.').slice(-1);
if (!lastKey) return true;
if (item.value.indexOf(lastKey) > -1) return true;
return false;
}
// handleClick = () => {
// this.props.field.editor.emit('variableBindDialog.open');
// }
render() {
const { value, dataSource } = this.state;
const { placeholder } = this.props;
const isValObject = !!(value == '[object Object]');
const title = isValObject
? this.i18n('valueIllegal')
: (value || placeholder || this.i18n('jsExpression')).toString();
const cursorIndex = this.getInputCursorPosition();
const childNode = cursorIndex ? (
<div className="cursor-blink">
{title.substr(0, cursorIndex)}
<b>|</b>
{title.substr(cursorIndex)}
</div>
) : (
title
);
return (
<div ref={this.expression} style={{ width: '100%', display: 'inline-block' }}>
<Tooltip
triggerType={isValObject ? ['click'] : ['focus']}
align="tl"
popupClassName="code-input-overlay"
trigger={
isValObject ? (
value
) : (
<div>
<AutoComplete
{...this.props}
style={{ width: '100%' }}
dataSource={dataSource}
placeholder={placeholder || this.i18n('jsExpression')}
value={value}
disabled={isValObject}
innerBefore={<span style={{ color: '#999', marginLeft: 4 }}>{'{{'}</span>}
innerAfter={<span style={{ color: '#999', marginRight: 4 }}>{'}}'}</span>}
popupClassName="expression-setter-item-inner"
// eslint-disable-next-line no-shadow
itemRender={({ value }) => {
return (
<Option key={value} text={value} value={value}>
<div className="code-input-value">{value}</div>
<div className="code-input-help">{helpMap[value]}</div>
</Option>
);
}}
onChange={this.onChange.bind(this)}
filter={this.filterOption.bind(this)}
/>
</div>
)
}
>
{childNode}
</Tooltip>
</div>
);
}
componentDidMount() {
this.$input = this.findInputElement();
if (this.$input) {
this.listenerFun = event => {
const isMoveKey = !!(event.type == 'keyup' && ~[37, 38, 39, 91].indexOf(event.keyCode));
const isMouseup = event.type == 'mouseup';
if (isMoveKey || isMouseup) {
// eslint-disable-next-line react/no-access-state-in-setstate
const dataSource = this.getDataSource(this.state.value) || [];
this.setState({
dataSource,
});
}
};
this.$input.addEventListener('keyup', this.listenerFun, false);
this.$input.addEventListener('mouseup', this.listenerFun, false);
}
}
componentWillUnmount() {
if (this.listenerFun && this.$input) {
this.$input.removeEventListener('keyup', this.listenerFun, false);
this.$input.removeEventListener('mouseup', this.listenerFun, false);
}
}
/**
* 获取Input输入框DOM节点
*/
findInputElement() {
return this.expression.current.children[0].getElementsByTagName('input')[0];
}
/**
* 获取光标位置
*
*/
getInputCursorPosition() {
if (!this.$input) return;
return this.$input.selectionStart;
}
/*
* 字符串取得对象keys
*/
getObjectKeys(str: string) {
let keys: string | any[] = [];
if (str) keys = str.split('.');
return keys.slice(0, keys.length - 1);
}
/*
* 设置input组件光标位置在闭合}前
*/
setInputCursorPosition(idx: number) {
this.$input.setSelectionRange(idx, idx);
this.forceUpdate();
}
}

242
packages/editor-setters/src/expression-setter/locale/snippets.ts
View File

@ -1,242 +0,0 @@
export default [
{
label: 'constants',
kind: 'Class',
insertText: 'constants',
detail: '应用全局常量',
documentation: '应用范围定义的通用常量',
},
{
label: 'utils',
kind: 'Class',
insertText: 'utils',
detail: '应用全局公共函数',
documentation: '应用范围扩展的公共函数',
},
{
label: 'state',
kind: 'Enum',
insertText: 'state',
detail: '当前所在容器组件内部状态',
documentation: 'React Class内部状态state',
},
{
label: 'setState',
kind: 'Function',
insertText: 'setState({\n\t$0\n})',
insertTextRules: 'InsertAsSnippet',
detail: '设置当前所在容器组件的state数据',
documentation: '原生React方法，会自动更新组件视图',
},
{
label: 'reloadDataSource',
kind: 'Function',
insertText: 'reloadDataSource(${1:${2:namespace}, ${3:false}, ${4:callback}})',
insertTextRules: 'InsertAsSnippet',
detail: '刷新当前所在的容器组件',
documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图',
},
{
label: 'location',
kind: 'Class',
insertText: 'location',
detail: '路由解析对象',
},
{
label: 'location.query',
kind: 'Value',
insertText: 'location.query.${1:xxxx}',
insertTextRules: 'InsertAsSnippet',
detail: '从路由解析对象中获取参数信息',
},
{
label: 'history',
kind: 'Class',
insertText: 'history',
detail: '路由历史对象',
},
{
label: 'React',
kind: 'Keyword',
insertText: 'React',
detail: 'React对象',
},
{
label: 'ReactDOM',
kind: 'Keyword',
insertText: 'ReactDOM',
detail: 'ReactDom对象',
},
{
label: 'ReactDOM.findDOMNode',
kind: 'Function',
insertText: 'ReactDOM.findDOMNode(${1:this.refs.xxxx})',
insertTextRules: 'InsertAsSnippet',
detail: 'ReactDom查找真实dom node',
},
{
label: 'Dialog.alert',
kind: 'Method',
insertText: [
'Dialog.alert({',
"\tcontent: '${1:Alert content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: 'alert弹框 By Fusion',
},
{
label: 'Dialog.confirm',
kind: 'Method',
insertText: [
'Dialog.confirm({',
"\tcontent: '${1:Confirm content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '确认弹出框 By Fusion',
},
{
label: 'Message.success',
kind: 'Method',
insertText: 'Message.success(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '成功反馈提示 By Fusion',
},
{
label: 'Message.error',
kind: 'Method',
insertText: 'Message.error(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '错误反馈提示 By Fusion',
},
{
label: 'Message.help',
kind: 'Method',
insertText: 'Message.help(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '帮助反馈提示 By Fusion',
},
{
label: 'Message.loading',
kind: 'Method',
insertText: 'Message.loading(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: 'loading反馈提示 By Fusion',
},
{
label: 'Message.notice',
kind: 'Method',
insertText: 'Message.notice(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '注意反馈提示 By Fusion',
},
{
label: 'Message.waining',
kind: 'Method',
insertText: 'Message.waining(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '警告反馈提示 By Fusion',
},
{
label: 'Modal.confirm',
kind: 'Method',
insertText: [
'Modal.confirm({',
"\tcontent: '${1:Confirm content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '确认弹出框 By Antd',
},
{
label: 'Modal.info',
kind: 'Method',
insertText: [
'Modal.info({',
"\tcontent: '${1:Info content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '信息弹出框 By Antd',
},
{
label: 'Modal.success',
kind: 'Method',
insertText: [
'Modal.success({',
"\tcontent: '${1:Success content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '成功弹出框 By Antd',
},
{
label: 'Modal.error',
kind: 'Method',
insertText: [
'Modal.error({',
"\tcontent: '${1:Error content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '错误弹出框 By Antd',
},
{
label: 'Modal.warning',
kind: 'Method',
insertText: [
'Modal.warning({',
"\tcontent: '${1:Warning content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '警告弹出框 By Antd',
},
];

21
packages/editor-setters/src/expression-setter/locale/utils.ts
View File

@ -1,21 +0,0 @@
import IntlMessageFormat from 'intl-messageformat';
export const isJSExpression = (obj = '') => {
if (obj && typeof obj === 'object' && obj.type === 'JSExpression') {
return true;
}
return false;
};
/**
* 用于构造国际化字符串处理函数
* @param {*} locale 国际化标识，例如 zh-CN、en-US
* @param {*} messages 国际化语言包
*/
export const generateI18n = (locale = 'zh-CN', messages = {}) => {
return function (key, values = {}) {
if (!messages || !messages[key]) return '';
const formater = new IntlMessageFormat(messages[key], locale);
return formater.format(values);
};
};

36
packages/editor-setters/src/expression-setter/locale/zh-CN.ts
View File

@ -1,36 +0,0 @@
export default {
// function
setting: '点击设置',
edit: '编辑',
submitConfirm: '确认提交 cmd+s',
close: '关闭 esc',
fullScreen: '全屏',
cancelFullScreen: '取消全屏',
jsonIllegal: '非json格式',
functionIllegal: '非function格式',
objectIllegal: '非object格式',
circularRef: '对象中出现循环引用的对象',
formatError: '格式错误',
saved: '已保存',
// expression
valueIllegal: '值类型为对象类型，与当前组件属性设置的控件类型不匹配，请在属性“代码编辑模式”下进行编辑',
jsExpression: '请输入JS表达式',
// Mixin
input: '字符串Input',
textarea: '多行字符串Textarea',
expression: '变量控件Expression',
monacoEditor: '编辑器MonacoEditor',
numberPicker: '数字NumberPicker',
bool: '布尔Switch',
datePicker: '日期选择DatePicker',
select: '下拉选择Select',
radio: '单项选择RadioGroup',
date: '日期选择DatePicker',
dateYear: '年选择DatePicker',
dateMonth: '月选择DatePicker',
dateRange: '日期区间选择DatePicker',
list: '数组List',
object: '对象ObjectButton',
reactNode: '节点类型ReactNode',
typeError: 'Minix组件属性Types配置错误，存在不支持类型[{type}]，请检查组件属性配置',
};

30
packages/editor-setters/src/function-setter/index.scss
View File

@ -1,30 +0,0 @@
.lc-function-setter{
.function-container{
position: relative;
}
.funtion-icon{
float: left;
width: 25px;
height: 25px;
}
.function-name{
font-size: 14px;
color:#5584FF;
margin-left:5px;
cursor: pointer;
}
.funtion-operate-icon{
font-size: 16px;
margin-left:5px;
cursor: pointer;
}
}

241
packages/editor-setters/src/function-setter/index.tsx
View File

@ -1,241 +0,0 @@
import React, { PureComponent } from 'react';
// import PropTypes from 'prop-types';
import { Button, Icon, Dialog } from '@alifd/next';
import MonacoEditor from 'react-monaco-editor';
import { js_beautify } from 'js-beautify';
import './index.scss';
const SETTER_NAME = 'function-setter';
const defaultEditorOption = {
width: '100%',
height: '100%',
options: {
readOnly: false,
automaticLayout: true,
folding: true, // 默认开启折叠代码功能
lineNumbers: 'on',
wordWrap: 'off',
formatOnPaste: true,
fontSize: 12,
tabSize: 2,
scrollBeyondLastLine: false,
fixedOverflowWidgets: false,
snippetSuggestions: 'top',
minimap: {
enabled: false,
},
scrollbar: {
vertical: 'auto',
horizontal: 'auto',
},
},
};
interface FunctionSetterProps {
value: string;
type: string;
defaultValue: string;
placeholder: string;
hasClear: boolean;
onChange: (icon: string) => undefined;
icons: string[];
}
export default class FunctionSetter extends PureComponent<FunctionSetterProps> {
static defaultProps = {
value: undefined,
type: 'string',
defaultValue: '',
hasClear: true,
placeholder: '请点击选择 Icon',
onChange: () => undefined,
};
private emitEventName = '';
state = {
isShowDialog: false,
};
componentDidMount() {
const { editor } = this.props.field;
this.emitEventName = `${SETTER_NAME}-${this.props.field.id}`;
editor.on(`${this.emitEventName}.bindEvent`, this.bindEvent);
}
bindEvent = (eventName, paramStr) => {
this.bindEventCallback(eventName, paramStr);
};
componentWillUnmount() {
const { editor } = this.props.field;
editor.off(`${this.emitEventName}.bindEvent`, this.bindEvent);
}
bindFunction = (isEdit) => {
const { field, value } = this.props;
let paramStr;
if (value) {
paramStr = this.parseFunctionParam(value.value);
}
field.editor.emit('eventBindDialog.openDialog', field.name, this.emitEventName, paramStr, isEdit);
};
openDialog = () => {
const { value = {} } = this.props;
this.setState({
isShowDialog: true,
});
this.functionCode = value.value;
};
closeDialog = () => {
this.setState({
isShowDialog: false,
});
};
removeFunctionBind = () => {
const { removeProp } = this.props;
removeProp();
};
parseFunctionName = (functionString: string) => {
// 因为函数格式是固定的，所以可以按照字符换去匹配获取函数名
return functionString.split('this.')[1]?.split('.')[0];
};
parseFunctionParam = (functionString:string) => {
// eslint-disable-next-line no-useless-escape
const matchList = functionString.match(/\[(\w|\s|\,|")*\]/);
if (matchList?.length) {
return matchList[0].substring(1, matchList[0].length - 1);
}
};
/**
* 渲染按钮(初始状态)
*/
renderButton = () => {
return <Button type="normal" onClick={() => this.bindFunction()}>绑定函数</Button>;
};
updateCode = (newCode) => {
this.functionCode = newCode;
};
onDialogOk = () => {
const { onChange } = this.props;
onChange({
type: 'JSFunction',
value: this.functionCode,
});
this.closeDialog();
};
focusFunctionName = (functionName) => {
const { editor } = this.props.field;
editor.get('skeleton').getPanel('sourceEditor').show();
setTimeout(() => {
editor.emit('sourceEditor.focusByFunction', {
functionName,
});
}, 300);
};
/**
* 渲染绑定函数
*/
renderBindFunction = () => {
const { value } = this.props;
// 解析函数名
const functionName = this.parseFunctionName(value.value);
return (
<div className="function-container">
<img className="funtion-icon" src="https://gw.alicdn.com/tfs/TB1NXNhk639YK4jSZPcXXXrUFXa-200-200.png" />
<span className="function-name" onClick={() => this.focusFunctionName(functionName)}>{functionName}</span>
<Icon type="set" size="medium" className="funtion-operate-icon" onClick={() => this.bindFunction(true)} />
<Icon type="ashbin" size="medium" className="funtion-operate-icon" onClick={this.removeFunctionBind} />
</div>
);
};
/**
* 渲染编辑函数按钮(可直接编辑函数内容)
*/
renderEditFunctionButton = () => {
return (
<div>
<Button type="primary" onClick={this.openDialog}><Icon type="edit" />编辑函数</Button>
</div>
);
};
bindEventCallback = (eventName: string, paramStr:string) => {
const { onChange } = this.props;
onChange({
type: 'JSFunction',
value: `function(){ return this.${eventName}.apply(this,Array.prototype.slice.call(arguments).concat([${paramStr || ''}])) }`,
});
};
render() {
const { value } = this.props;
const { isShowDialog } = this.state;
let functionName = '';
if (value && value.value) {
functionName = this.parseFunctionName(value.value);
}
let renderFunction;
if (value) {
if (functionName) {
renderFunction = this.renderBindFunction;
} else {
renderFunction = this.renderEditFunctionButton;
}
} else {
renderFunction = this.renderButton;
}
return (
<div className="lc-function-setter">
{
renderFunction()
}
{
value && value.value &&
<Dialog visible={isShowDialog} closeable={'close'} title="函数编辑" onCancel={this.closeDialog} onOk={this.onDialogOk} onClose={() => { this.closeDialog(); }}>
<div style={{ width: '500px', height: '400px' }}>
<MonacoEditor
value={js_beautify(value.value)}
{...defaultEditorOption}
{...{ language: 'javascript' }}
onChange={(newCode) => this.updateCode(newCode)}
/>
</div>
</Dialog>
}
</div>
);
}
}

36
packages/editor-setters/src/icon-setter/index.scss
View File

@ -1,36 +0,0 @@
.lc-icon-setter{
.next-input{
width: auto !important;
}
i {
min-width: 12px;
}
i:hover {
cursor: pointer;
}
input:hover {
cursor: pointer;
}
}
.lowcode-icon-setter-popup{
max-width: 354px;
.lowcode-icon-list{
overflow: auto;
li{
float: left;
margin-bottom: 10px;
width: 40px;
color: #666;
cursor: pointer;
text-align: center;
&:hover{
color: #000;
}
}
}
}

171
packages/editor-setters/src/icon-setter/index.tsx
View File

@ -1,171 +0,0 @@
import React, { PureComponent } from 'react';
// import PropTypes from 'prop-types';
import { Input, Icon, Balloon } from '@alifd/next';
import './index.scss';
const icons = [
'smile',
'cry',
'success',
'warning',
'prompt',
'error',
'help',
'clock',
'success-filling',
'delete-filling',
'favorites-filling',
'add',
'minus',
'arrow-up',
'arrow-down',
'arrow-left',
'arrow-right',
'arrow-double-left',
'arrow-double-right',
'switch',
'sorting',
'descending',
'ascending',
'select',
'semi-select',
'loading',
'search',
'close',
'ellipsis',
'picture',
'calendar',
'ashbin',
'upload',
'download',
'set',
'edit',
'refresh',
'filter',
'attachment',
'account',
'email',
'atm',
'copy',
'exit',
'eye',
'eye-close',
'toggle-left',
'toggle-right',
'lock',
'unlock',
'chart-pie',
'chart-bar',
'form',
'detail',
'list',
'dashboard',
];
interface IconSetterProps {
value: string;
type: string;
defaultValue: string;
placeholder: string;
hasClear: boolean;
onChange: (icon: string) => undefined;
icons: string[];
}
export default class IconSetter extends PureComponent<IconSetterProps> {
static defaultProps = {
value: undefined,
type: 'string',
defaultValue: '',
hasClear: true,
icons,
placeholder: '请点击选择 Icon',
onChange: () => undefined,
};
state = {
firstLoad: true,
};
_onChange = (icon: string) => {
const { onChange, type } = this.props;
if (type === 'string') {
onChange(icon);
} else if (type === 'node') {
onChange({
componentName: 'Icon',
props: {
type: icon,
},
});
}
};
onInputChange = (icon: string) => {
this._onChange(icon);
};
onSelectIcon = (icon: string) => {
this._onChange(icon);
};
render() {
const { value, defaultValue, onChange, placeholder, hasClear } = this.props;
const { firstLoad } = this.state;
const _value = typeof value === 'object' ? value?.props?.type : value;
if (firstLoad && defaultValue && typeof value === 'undefined') {
onChange(defaultValue);
this.setState({
firstLoad: false,
});
}
const currentIcon = <Icon size="xs" type={_value} />;
const clearIcon = hasClear && (
<Icon
size="xs"
id="icon-clear"
type="delete-filling"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
this.onSelectIcon('');
}}
/>
);
const triggerNode = (
<div>
<Input
placeholder={placeholder}
addonTextBefore={currentIcon}
onChange={this.onInputChange}
value={_value}
defaultValue={defaultValue}
readOnly
addonTextAfter={clearIcon}
/>
</div>
);
const InnerBeforeNode = (
<Balloon
className={'lowcode-icon-content'}
trigger={triggerNode}
needAdjust
triggerType="click"
closable={false}
alignEdge
align="l"
popupClassName="lowcode-icon-setter-popup"
>
<ul className="lowcode-icon-list">
{icons.map((icon) => (
<li key={icon} onClick={() => this.onSelectIcon(icon)}>
<Icon type={icon} size="medium" />
</li>
))}
</ul>
</Balloon>
);
return <div className="lc-icon-setter">{InnerBeforeNode}</div>;
}
}

139
packages/editor-setters/src/index.tsx
View File

@ -1,139 +0,0 @@
import React, { Component } from 'react';
import { registerSetter } from '@ali/lowcode-editor-core';
import { isJSExpression, isJSFunction } from '@ali/lowcode-types';
import { DatePicker, TimePicker, Input, Radio, Select, Switch, NumberPicker } from '@alifd/next';
import ExpressionSetter from './expression-setter';
import ColorSetter from './color-setter';
import JsonSetter from './json-setter';
import EventsSetter from './events-setter';
import StyleSetter from './style-setter';
import IconSetter from './icon-setter';
import FunctionSetter from './function-setter';
import ClassNameSetter from './classname-setter';
// import MixedSetter from './mixed-setter';
export const StringSetter = {
component: Input,
defaultProps: { placeholder: '请输入', style: { maxWidth: 180 } },
title: 'StringSetter',
recommend: true,
condition: (field: any) => {
const v = field.getValue();
return typeof v === 'string';
},
};
export const NumberSetter = NumberPicker;
export class BoolSetter extends Component<any> {
render() {
const { onChange, value, defaultValue } = this.props;
const props: Record<string, any> = {
defaultChecked: defaultValue,
onChange,
};
// Switch是通过 'checke' in props 来判断是否使用 defaultChecked
if (typeof value !== 'undefined') {
props.checked = value;
}
return <Switch {...props} />;
}
}
export const SelectSetter = Select;
// suggest: 做成 SelectSetter 一种变体
export const RadioGroupSetter = {
component: Radio.Group,
defaultProps: {
shape: 'button',
},
};
// suggest: 做成 StringSetter 的一个参数，
export const TextAreaSetter = {
component: Input.TextArea,
defaultProps: { placeholder: '请输入', style: { maxWidth: 180 } },
title: 'TextAreaSetter',
recommend: true,
condition: (field: any) => {
const v = field.getValue();
return typeof v === 'string';
},
};
export const DateSetter = DatePicker;
export const DateYearSetter = DatePicker.YearPicker;
export const DateMonthSetter = DatePicker.MonthPicker;
export const DateRangeSetter = DatePicker.RangePicker;
export { ExpressionSetter, EventsSetter, JsonSetter, IconSetter };
// eslint-disable-next-line react/no-multi-comp
class StringDateSetter extends Component {
render() {
const { onChange } = this.props;
return (
<DatePicker
onChange={(val) => {
onChange(val.format());
}}
/>
);
}
}
// eslint-disable-next-line react/no-multi-comp
class StringTimePicker extends Component {
render() {
const { onChange } = this.props;
return (
<TimePicker
onChange={(val) => {
onChange(val.format('HH:mm:ss'));
}}
/>
);
}
}
const VariableSetter = {
component: ExpressionSetter,
condition: (field: any) => {
const v = field.getValue();
return isJSExpression(v);
},
defaultProps: { placeholder: '请输入表达式' },
title: '表达式输入',
recommend: true,
};
const FunctionBindSetter = {
component: FunctionSetter,
title: '函数绑定',
condition: (field: any) => {
const v = field.getValue();
return v == isJSFunction(v);
},
};
const builtinSetters: any = {
StringSetter,
NumberSetter,
BoolSetter,
SelectSetter,
VariableSetter,
ExpressionSetter: VariableSetter,
RadioGroupSetter,
TextAreaSetter,
DateSetter: StringDateSetter,
TimePicker: StringTimePicker,
DateYearSetter,
DateMonthSetter,
DateRangeSetter,
EventsSetter,
ColorSetter,
JsonSetter,
StyleSetter,
IconSetter,
ClassNameSetter,
FunctionSetter: FunctionBindSetter,
};
registerSetter(builtinSetters);

121
packages/editor-setters/src/json-setter/index.tsx
View File

@ -1,121 +0,0 @@
import React, { PureComponent } from 'react';
// import PropTypes from 'prop-types';
import { Button, Icon, Dialog } from '@alifd/next';
import MonacoEditor from 'react-monaco-editor';
import { js_beautify } from 'js-beautify';
const defaultEditorOption = {
width: '100%',
height: '100%',
options: {
readOnly: false,
automaticLayout: true,
folding: true, // 默认开启折叠代码功能
lineNumbers: 'on',
wordWrap: 'off',
formatOnPaste: true,
fontSize: 12,
tabSize: 2,
scrollBeyondLastLine: false,
fixedOverflowWidgets: false,
snippetSuggestions: 'top',
minimap: {
enabled: false,
},
scrollbar: {
vertical: 'auto',
horizontal: 'auto',
},
},
};
interface JsonSetterProps {
value: string;
type: string;
defaultValue: string;
placeholder: string;
hasClear: boolean;
onChange: (icon: string) => undefined;
icons: string[];
}
export default class JsonSetter extends PureComponent<JsonSetterProps> {
private datasourceCode = '';
state = {
isShowDialog: false,
value: JSON.stringify(this.props.value),
};
openDialog = () => {
const { value } = this.state;
this.setState({
isShowDialog: true,
});
this.datasourceCode = value;
};
closeDialog = () => {
this.setState({
isShowDialog: false,
});
};
/**
* 渲染按钮
*/
renderButton = (value) => {
return !value ? <Button type="normal" onClick={this.openDialog}>绑定数据</Button> : <Button type="primary" onClick={this.openDialog}><Icon type="edit" />编辑数据</Button>;
};
updateCode = (newCode) => {
this.datasourceCode = newCode;
};
onDialogOk = () => {
const { onChange } = this.props;
onChange(JSON.parse(this.datasourceCode));
this.closeDialog();
};
/**
* 渲染编辑函数按钮(可直接编辑函数内容)
*/
renderEditFunctionButton = () => {
return (
<div>
<Button type="primary" onClick={this.openDialog}><Icon type="edit" />编辑数据</Button>
</div>
);
};
render() {
const { value } = this.state;
const { isShowDialog } = this.state;
return (
<div>
{
this.renderButton(value)
}
{
<Dialog visible={isShowDialog} closeable={'close'} title="数据编辑" onCancel={this.closeDialog} onOk={this.onDialogOk} onClose={() => { this.closeDialog(); }}>
<div style={{ width: '500px', height: '400px' }}>
<MonacoEditor
value={js_beautify(value)}
{...defaultEditorOption}
{...{ language: 'json' }}
onChange={(newCode) => this.updateCode(newCode)}
/>
</div>
</Dialog>
}
</div>
);
}
}

242
packages/editor-setters/src/json-setter/locale/snippets.ts
View File

@ -1,242 +0,0 @@
export default [
{
label: 'constants',
kind: 'Class',
insertText: 'constants',
detail: '应用全局常量',
documentation: '应用范围定义的通用常量',
},
{
label: 'utils',
kind: 'Class',
insertText: 'utils',
detail: '应用全局公共函数',
documentation: '应用范围扩展的公共函数',
},
{
label: 'state',
kind: 'Enum',
insertText: 'state',
detail: '当前所在容器组件内部状态',
documentation: 'React Class内部状态state',
},
{
label: 'setState',
kind: 'Function',
insertText: 'setState({\n\t$0\n})',
insertTextRules: 'InsertAsSnippet',
detail: '设置当前所在容器组件的state数据',
documentation: '原生React方法，会自动更新组件视图',
},
{
label: 'reloadDataSource',
kind: 'Function',
insertText: 'reloadDataSource(${1:${2:namespace}, ${3:false}, ${4:callback}})',
insertTextRules: 'InsertAsSnippet',
detail: '刷新当前所在的容器组件',
documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图',
},
{
label: 'location',
kind: 'Class',
insertText: 'location',
detail: '路由解析对象',
},
{
label: 'location.query',
kind: 'Value',
insertText: 'location.query.${1:xxxx}',
insertTextRules: 'InsertAsSnippet',
detail: '从路由解析对象中获取参数信息',
},
{
label: 'history',
kind: 'Class',
insertText: 'history',
detail: '路由历史对象',
},
{
label: 'React',
kind: 'Keyword',
insertText: 'React',
detail: 'React对象',
},
{
label: 'ReactDOM',
kind: 'Keyword',
insertText: 'ReactDOM',
detail: 'ReactDom对象',
},
{
label: 'ReactDOM.findDOMNode',
kind: 'Function',
insertText: 'ReactDOM.findDOMNode(${1:this.refs.xxxx})',
insertTextRules: 'InsertAsSnippet',
detail: 'ReactDom查找真实dom node',
},
{
label: 'Dialog.alert',
kind: 'Method',
insertText: [
'Dialog.alert({',
"\tcontent: '${1:Alert content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: 'alert弹框 By Fusion',
},
{
label: 'Dialog.confirm',
kind: 'Method',
insertText: [
'Dialog.confirm({',
"\tcontent: '${1:Confirm content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '确认弹出框 By Fusion',
},
{
label: 'Message.success',
kind: 'Method',
insertText: 'Message.success(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '成功反馈提示 By Fusion',
},
{
label: 'Message.error',
kind: 'Method',
insertText: 'Message.error(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '错误反馈提示 By Fusion',
},
{
label: 'Message.help',
kind: 'Method',
insertText: 'Message.help(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '帮助反馈提示 By Fusion',
},
{
label: 'Message.loading',
kind: 'Method',
insertText: 'Message.loading(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: 'loading反馈提示 By Fusion',
},
{
label: 'Message.notice',
kind: 'Method',
insertText: 'Message.notice(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '注意反馈提示 By Fusion',
},
{
label: 'Message.waining',
kind: 'Method',
insertText: 'Message.waining(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '警告反馈提示 By Fusion',
},
{
label: 'Modal.confirm',
kind: 'Method',
insertText: [
'Modal.confirm({',
"\tcontent: '${1:Confirm content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '确认弹出框 By Antd',
},
{
label: 'Modal.info',
kind: 'Method',
insertText: [
'Modal.info({',
"\tcontent: '${1:Info content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '信息弹出框 By Antd',
},
{
label: 'Modal.success',
kind: 'Method',
insertText: [
'Modal.success({',
"\tcontent: '${1:Success content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '成功弹出框 By Antd',
},
{
label: 'Modal.error',
kind: 'Method',
insertText: [
'Modal.error({',
"\tcontent: '${1:Error content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '错误弹出框 By Antd',
},
{
label: 'Modal.warning',
kind: 'Method',
insertText: [
'Modal.warning({',
"\tcontent: '${1:Warning content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '警告弹出框 By Antd',
},
];

21
packages/editor-setters/src/json-setter/locale/utils.ts
View File

@ -1,21 +0,0 @@
import IntlMessageFormat from 'intl-messageformat';
export const isJSExpression = (obj = '') => {
if (obj && typeof obj === 'object' && obj.type === 'JSExpression') {
return true;
}
return false;
};
/**
* 用于构造国际化字符串处理函数
* @param {*} locale 国际化标识，例如 zh-CN、en-US
* @param {*} messages 国际化语言包
*/
export const generateI18n = (locale = 'zh-CN', messages = {}) => {
return function (key, values = {}) {
if (!messages || !messages[key]) return '';
const formater = new IntlMessageFormat(messages[key], locale);
return formater.format(values);
};
};

36
packages/editor-setters/src/json-setter/locale/zh-CN.ts
View File

@ -1,36 +0,0 @@
export default {
// function
setting: '点击设置',
edit: '编辑',
submitConfirm: '确认提交 cmd+s',
close: '关闭 esc',
fullScreen: '全屏',
cancelFullScreen: '取消全屏',
jsonIllegal: '非json格式',
functionIllegal: '非function格式',
objectIllegal: '非object格式',
circularRef: '对象中出现循环引用的对象',
formatError: '格式错误',
saved: '已保存',
// expression
valueIllegal: '值类型为对象类型，与当前组件属性设置的控件类型不匹配，请在属性“代码编辑模式”下进行编辑',
jsExpression: '请输入JS表达式',
// Mixin
input: '字符串Input',
textarea: '多行字符串Textarea',
expression: '变量控件Expression',
monacoEditor: '编辑器MonacoEditor',
numberPicker: '数字NumberPicker',
bool: '布尔Switch',
datePicker: '日期选择DatePicker',
select: '下拉选择Select',
radio: '单项选择RadioGroup',
date: '日期选择DatePicker',
dateYear: '年选择DatePicker',
dateMonth: '月选择DatePicker',
dateRange: '日期区间选择DatePicker',
list: '数组List',
object: '对象ObjectButton',
reactNode: '节点类型ReactNode',
typeError: 'Minix组件属性Types配置错误，存在不支持类型[{type}]，请检查组件属性配置',
};

242
packages/editor-setters/src/locale/snippets.ts
View File

@ -1,242 +0,0 @@
export default [
{
label: 'constants',
kind: 'Class',
insertText: 'constants',
detail: '应用全局常量',
documentation: '应用范围定义的通用常量',
},
{
label: 'utils',
kind: 'Class',
insertText: 'utils',
detail: '应用全局公共函数',
documentation: '应用范围扩展的公共函数',
},
{
label: 'state',
kind: 'Enum',
insertText: 'state',
detail: '当前所在容器组件内部状态',
documentation: 'React Class内部状态state',
},
{
label: 'setState',
kind: 'Function',
insertText: 'setState({\n\t$0\n})',
insertTextRules: 'InsertAsSnippet',
detail: '设置当前所在容器组件的state数据',
documentation: '原生React方法，会自动更新组件视图',
},
{
label: 'reloadDataSource',
kind: 'Function',
insertText: 'reloadDataSource(${1:${2:namespace}, ${3:false}, ${4:callback}})',
insertTextRules: 'InsertAsSnippet',
detail: '刷新当前所在的容器组件',
documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图',
},
{
label: 'location',
kind: 'Class',
insertText: 'location',
detail: '路由解析对象',
},
{
label: 'location.query',
kind: 'Value',
insertText: 'location.query.${1:xxxx}',
insertTextRules: 'InsertAsSnippet',
detail: '从路由解析对象中获取参数信息',
},
{
label: 'history',
kind: 'Class',
insertText: 'history',
detail: '路由历史对象',
},
{
label: 'React',
kind: 'Keyword',
insertText: 'React',
detail: 'React对象',
},
{
label: 'ReactDOM',
kind: 'Keyword',
insertText: 'ReactDOM',
detail: 'ReactDom对象',
},
{
label: 'ReactDOM.findDOMNode',
kind: 'Function',
insertText: 'ReactDOM.findDOMNode(${1:this.refs.xxxx})',
insertTextRules: 'InsertAsSnippet',
detail: 'ReactDom查找真实dom node',
},
{
label: 'Dialog.alert',
kind: 'Method',
insertText: [
'Dialog.alert({',
"\tcontent: '${1:Alert content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: 'alert弹框 By Fusion',
},
{
label: 'Dialog.confirm',
kind: 'Method',
insertText: [
'Dialog.confirm({',
"\tcontent: '${1:Confirm content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '确认弹出框 By Fusion',
},
{
label: 'Message.success',
kind: 'Method',
insertText: 'Message.success(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '成功反馈提示 By Fusion',
},
{
label: 'Message.error',
kind: 'Method',
insertText: 'Message.error(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '错误反馈提示 By Fusion',
},
{
label: 'Message.help',
kind: 'Method',
insertText: 'Message.help(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '帮助反馈提示 By Fusion',
},
{
label: 'Message.loading',
kind: 'Method',
insertText: 'Message.loading(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: 'loading反馈提示 By Fusion',
},
{
label: 'Message.notice',
kind: 'Method',
insertText: 'Message.notice(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '注意反馈提示 By Fusion',
},
{
label: 'Message.waining',
kind: 'Method',
insertText: 'Message.waining(${1:content})',
insertTextRules: 'InsertAsSnippet',
detail: '警告反馈提示 By Fusion',
},
{
label: 'Modal.confirm',
kind: 'Method',
insertText: [
'Modal.confirm({',
"\tcontent: '${1:Confirm content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '确认弹出框 By Antd',
},
{
label: 'Modal.info',
kind: 'Method',
insertText: [
'Modal.info({',
"\tcontent: '${1:Info content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '信息弹出框 By Antd',
},
{
label: 'Modal.success',
kind: 'Method',
insertText: [
'Modal.success({',
"\tcontent: '${1:Success content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '成功弹出框 By Antd',
},
{
label: 'Modal.error',
kind: 'Method',
insertText: [
'Modal.error({',
"\tcontent: '${1:Error content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '错误弹出框 By Antd',
},
{
label: 'Modal.warning',
kind: 'Method',
insertText: [
'Modal.warning({',
"\tcontent: '${1:Warning content}',",
"\ttitle: '${2:Title}',",
'\tonOk: () => {',
'\t\t$3',
'\t},',
'\tonCancel: () => {',
'\t\t$4',
'\t}',
'})',
].join('\n'),
insertTextRules: 'InsertAsSnippet',
detail: '警告弹出框 By Antd',
},
];

21
packages/editor-setters/src/locale/utils.ts
View File

@ -1,21 +0,0 @@
import IntlMessageFormat from 'intl-messageformat';
export const isJSExpression = (obj = '') => {
if (obj && typeof obj === 'object' && obj.type === 'JSExpression') {
return true;
}
return false;
};
/**
* 用于构造国际化字符串处理函数
* @param {*} locale 国际化标识，例如 zh-CN、en-US
* @param {*} messages 国际化语言包
*/
export const generateI18n = (locale = 'zh-CN', messages = {}) => {
return function (key, values = {}) {
if (!messages || !messages[key]) return '';
const formater = new IntlMessageFormat(messages[key], locale);
return formater.format(values);
};
};

36
packages/editor-setters/src/locale/zh-CN.ts
View File

@ -1,36 +0,0 @@
export default {
// function
setting: '点击设置',
edit: '编辑',
submitConfirm: '确认提交 cmd+s',
close: '关闭 esc',
fullScreen: '全屏',
cancelFullScreen: '取消全屏',
jsonIllegal: '非json格式',
functionIllegal: '非function格式',
objectIllegal: '非object格式',
circularRef: '对象中出现循环引用的对象',
formatError: '格式错误',
saved: '已保存',
// expression
valueIllegal: '值类型为对象类型，与当前组件属性设置的控件类型不匹配，请在属性“代码编辑模式”下进行编辑',
jsExpression: '请输入JS表达式',
// Mixin
input: '字符串Input',
textarea: '多行字符串Textarea',
expression: '变量控件Expression',
monacoEditor: '编辑器MonacoEditor',
numberPicker: '数字NumberPicker',
bool: '布尔Switch',
datePicker: '日期选择DatePicker',
select: '下拉选择Select',
radio: '单项选择RadioGroup',
date: '日期选择DatePicker',
dateYear: '年选择DatePicker',
dateMonth: '月选择DatePicker',
dateRange: '日期区间选择DatePicker',
list: '数组List',
object: '对象ObjectButton',
reactNode: '节点类型ReactNode',
typeError: 'Minix组件属性Types配置错误，存在不支持类型[{type}]，请检查组件属性配置',
};

13
packages/editor-setters/src/mixed-setter/index.scss
View File

@ -1,13 +0,0 @@
// mixed
.lowcode-setter-mixed > * {
vertical-align: middle;
}
.lowcode-setter-mixed {
width: 86%;
}
.lowcode-setter-mixed .next-input {
width: 100%;
}
.lowcode-setter-mixed .next-select-trigger {
width: 100%;
}

161
packages/editor-setters/src/mixed-setter/index.tsx
View File

@ -1,161 +0,0 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Dropdown, Button, Menu, Icon } from '@alifd/next';
import { getSetter } from '@ali/lowcode-editor-core';
import { generateI18n } from './locale/utils';
import zhCN from './locale/zh-CN';
import './index.scss';
export default class Mixed extends PureComponent {
static displayName = 'Mixed';
static propTypes = {
locale: PropTypes.string,
messages: PropTypes.object,
defaultType: PropTypes.string,
types: PropTypes.arrayOf(PropTypes.string),
inputProps: PropTypes.object,
expressionProps: PropTypes.object,
monacoEditorProps: PropTypes.object,
switchProps: PropTypes.object,
selectProps: PropTypes.object,
radioGroupProps: PropTypes.object,
};
static defaultProps = {
locale: 'zh-CN',
messages: zhCN,
types: [
{
name: 'StringSetter',
props: {},
},
],
};
typeMap: any;
i18n: (key: any, values) => string | void | Array<string | void>;
constructor(props: Readonly) {
super(props);
const type = props.defaultType; // judgeTypeHandler(props, {});
this.i18n = generateI18n(props.locale, props.messages);
this.state = {
type,
};
}
changeType(type: string) {
if (typeof type === 'object' || type === this.state.type) return;
const { onChange } = this.props;
let newValue;
const setterProps = this.typeMap[type].props;
if (setterProps) {
if (setterProps.value !== undefined) {
newValue = setterProps.value;
} else if (setterProps.defaultValue !== undefined) {
newValue = setterProps.defaultValue;
}
}
if (type === 'BoolSetter' && newValue === undefined) {
newValue = false; // 给切换到switch默认值为false
}
this.setState({ type });
onChange && onChange(newValue);
}
render() {
const { style = {}, className, locale, messages, types = [], defaultType, ...restProps } = this.props;
this.typeMap = {};
const realTypes: any[] = [];
types.forEach((el: { name: any; props: any }) => {
const { name, props } = el;
const Setter = getSetter(name);
if (Setter) {
this.typeMap[name] = {
label: name,
component: Setter.component,
props,
};
}
realTypes.push(name);
});
let moreBtnNode = null;
// 如果只有2种，且有变量表达式，则直接展示变量按钮
if (realTypes.length > 1) {
const isTwoType = !!(realTypes.length === 2 && ~realTypes.indexOf('ExpressionSetter'));
const btnProps = {
size: 'small',
text: true,
style: {
position: 'absolute',
left: '100%',
top: 0,
bottom: 0,
margin: 'auto 0 auto 8px',
padding: 0,
width: 16,
height: 16,
lineHeight: '16px',
textAlign: 'center',
},
};
if (isTwoType) {
btnProps.onClick = this.changeType.bind(this, realTypes.indexOf(this.state.type) ? realTypes[0] : realTypes[1]);
}
const triggerNode = (
<Button {...btnProps} size={isTwoType ? 'large' : 'small'}>
<Icon type={isTwoType ? 'edit' : 'ellipsis'} />
</Button>
);
if (isTwoType) {
moreBtnNode = triggerNode;
} else {
// eslint-disable-next-line @typescript-eslint/ban-types
const MenuItems: {} | null | undefined = [];
realTypes.map((type) => {
if (this.typeMap[type]) {
MenuItems.push(<Menu.Item key={type}>{this.typeMap[type].label}</Menu.Item>);
} else {
console.error(
this.i18n('typeError', {
type,
}),
);
}
return type;
});
const MenuNode = (
<Menu
selectMode="single"
hasSelectedIcon={false}
selectedKeys={this.state.type}
onItemClick={this.changeType.bind(this)}
>
{MenuItems}
</Menu>
);
moreBtnNode = (
<Dropdown trigger={triggerNode} triggerType="click">
{MenuNode}
</Dropdown>
);
}
}
const TargetNode = this.typeMap[this.state.type]?.component || 'div';
const targetProps = this.typeMap[this.state.type]?.props || {};
const tarStyle = { position: 'relative', ...style };
const classes = classNames(className, 'lowcode-setter-mixin');
return (
<div style={tarStyle} className={classes}>
<TargetNode {...restProps} {...targetProps} />
{moreBtnNode}
</div>
);
}
}

21
packages/editor-setters/src/mixed-setter/locale/utils.ts
View File

@ -1,21 +0,0 @@
import IntlMessageFormat from 'intl-messageformat';
export const isJSExpression = (obj = '') => {
if (obj && typeof obj === 'object' && obj.type === 'JSExpression') {
return true;
}
return false;
};
/**
* 用于构造国际化字符串处理函数
* @param {*} locale 国际化标识，例如 zh-CN、en-US
* @param {*} messages 国际化语言包
*/
export const generateI18n = (locale = 'zh-CN', messages = {}) => {
return function (key, values = {}) {
if (!messages || !messages[key]) return '';
const formater = new IntlMessageFormat(messages[key], locale);
return formater.format(values);
};
};

36
packages/editor-setters/src/mixed-setter/locale/zh-CN.ts
View File

@ -1,36 +0,0 @@
export default {
// function
setting: '点击设置',
edit: '编辑',
submitConfirm: '确认提交 cmd+s',
close: '关闭 esc',
fullScreen: '全屏',
cancelFullScreen: '取消全屏',
jsonIllegal: '非json格式',
functionIllegal: '非function格式',
objectIllegal: '非object格式',
circularRef: '对象中出现循环引用的对象',
formatError: '格式错误',
saved: '已保存',
// expression
valueIllegal: '值类型为对象类型，与当前组件属性设置的控件类型不匹配，请在属性“代码编辑模式”下进行编辑',
jsExpression: '请输入JS表达式',
// Mixin
input: '字符串Input',
textarea: '多行字符串Textarea',
expression: '变量控件Expression',
monacoEditor: '编辑器MonacoEditor',
numberPicker: '数字NumberPicker',
bool: '布尔Switch',
datePicker: '日期选择DatePicker',
select: '下拉选择Select',
radio: '单项选择RadioGroup',
date: '日期选择DatePicker',
dateYear: '年选择DatePicker',
dateMonth: '月选择DatePicker',
dateRange: '日期区间选择DatePicker',
list: '数组List',
object: '对象ObjectButton',
reactNode: '节点类型ReactNode',
typeError: 'Minix组件属性Types配置错误，存在不支持类型[{type}]，请检查组件属性配置',
};

37
packages/editor-setters/src/style-setter/index.tsx
View File

@ -1,37 +0,0 @@
import './style.less';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import LowStyleSetter from '@ali/lc-style-setter';
import { globalLocale } from '@ali/lowcode-editor-core';
export default class StyleSetter extends Component {
static displayName = 'StyleSetter';
static propTypes = {
value: PropTypes.object,
onChange: PropTypes.func,
placeholder: PropTypes.string,
locale: PropTypes.string,
};
static defaultProps = {
value: {},
onChange: () => { },
placeholder: '',
locale: globalLocale.getLocale() || 'en-US',
};
onChange = (val: any) => {
const { onChange } = this.props;
onChange(val.native);
};
render() {
const { value } = this.props;
return (
<div className="lc-block-setter">
<LowStyleSetter {...this.props} value={value} onChange={this.onChange} />
</div>
);
}
}

42
packages/editor-setters/src/style-setter/lc-style-setter/background/attachment.js
View File

@ -1,42 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import ChoiceControl from '@ali/ve-choice-control';
import Icons from '@ali/ve-icons';
import utils from '../utils';
const attchments = [{
title: <Icons name="style.yes" size="12px" />,
value: 'fixed',
}, {
title: <Icons name="style.no" size="12px" />,
value: 'scroll',
}];
class Attachment extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleBackgrounAttachmentSetter';
setAttachment(attachment) {
utils.setBackground(this.props, 'background-attachment', attachment);
}
render() {
const className = classNames('vs-style-background-attachment', this.props.className);
const attachment = utils.getBackground(this.props, 'background-attachment').value;
return (
<ChoiceControl
className={className}
value={attachment}
options={attchments}
onChange={(value) => this.setAttachment(value)}
/>
);
}
}
export default Attachment;

42
packages/editor-setters/src/style-setter/lc-style-setter/background/color.js
View File

@ -1,42 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import ColorControl from '@ali/ve-color-control';
import utils from '../utils';
class Color extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleBackgrounColorSetter';
static transducer = utils.transducer;
componentWillMount() {
}
componentWillUnmount() {
}
setColor(color) {
utils.setBackground(this.props, 'background-color', color);
}
render() {
const className = classNames('vs-style-background-color', this.props.className);
const { current, inherit } = utils.getBackground(this.props, 'background-color');
return (
<ColorControl
className={className}
value={current}
placeholder={inherit}
onChange={(value) => this.setColor(value)}
/>
);
}
}
export default Color;

56
packages/editor-setters/src/style-setter/lc-style-setter/background/image.js
View File

@ -1,56 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import ImageControl from '@ali/ve-image-control';
import utils from '../utils';
import $i18n from '../i18n/index';
class Image extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleBackgroundImageSetter';
static transducer = utils.transducer;
componentWillMount() {
}
componentWillUnmount() {
}
setImage(image) {
if (image) {
image = image.trim();
}
if (image && image !== 'none') {
image = `url("${image}")`;
}
utils.setBackground(this.props, 'background-image', image);
}
render() {
const className = classNames('vs-style-background-image', this.props.className);
const { current, inherit } = utils.getBackground(this.props, 'background-image');
const url = utils.getImageUrl(current);
return (
<ImageControl
className={className}
value={url}
showPanel={false}
placeholder={
current && !url
? $i18n.get({ id: 'styleUnsupportedImage', dm: '暂未支持的图片' })
: inherit || $i18n.get({ id: 'stylePleaseEnterAnAddress', dm: '请输入地址或粘贴上传' })
}
onChange={value => this.setImage(value)}
/>
);
}
}
export default Image;

117
packages/editor-setters/src/style-setter/lc-style-setter/background/index.js
View File

@ -1,117 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import Field from '@ali/ve-field';
import Icons from '@ali/ve-icons';
import Color from './color';
import Image from './image';
import Position from './position';
import Size from './size';
import Repeat from './repeat';
import Attachment from './attachment';
import utils from '../utils';
import $i18n from '../i18n/index';
class Background extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleTypographySetter';
static transducer = utils.transducer;
componentWillMount() {
}
// shouldComponentUpdate() {
// return false;
// }
componentWillUnmount() {
}
render() {
const className = classNames('vs-style-background', this.props.className);
const image = utils.getBackground(this.props, 'background-image').value;
const imageUrl = utils.getImageUrl(image);
return (
<div className={className}>
<Field
display="inline"
highlight={utils.getBackground(this.props, 'background-color').current != undefined}
title={(
<span data-tip={$i18n.get({ id: 'styleFillColor', dm: '填充色' })}>
<Icons name="style.fill" size="medium" />
</span>
)}
>
<Color {...this.props} />
</Field>
<Field
display="inline"
highlight={utils.getBackground(this.props, 'background-image').current != undefined}
title={(
<span data-tip={$i18n.get({ id: 'styleImage', dm: '图片' })}>
<Icons name="style.image" size="medium" />
</span>
)}
>
<Image {...this.props} />
</Field>
{imageUrl && imageUrl !== 'none' ? (
<div className="vs-style-background-advanced">
<Field
display="caption"
title={$i18n.get({ id: 'stylePositioning', dm: '定位' })}
highlight={utils.getBackground(this.props, 'background-position').current != undefined}
>
<Position {...this.props} />
</Field>
<Field display="caption" title={$i18n.get({ id: 'styleSize', dm: '大小' })}>
<Size
highlight={utils.getBackground(this.props, 'background-size').current != undefined}
{...this.props}
/>
</Field>
<Field
display="plain"
className="vs-flex-field"
highlight={utils.getBackground(this.props, 'background-repeat').current != undefined}
>
<Field
display="inline"
title={(
<span data-tip={$i18n.get({ id: 'styleTile', dm: '平铺' })}>
<Icons name="style.repeat" size="16px" />
</span>
)}
>
<Repeat {...this.props} />
</Field>
<Field
display="inline"
title={(
<span data-tip={$i18n.get({ id: 'styleFixed', dm: '固定' })}>
<Icons name="style.fixed" size="medium" />
</span>
)}
>
<Attachment {...this.props} />
</Field>
</Field>
</div>
) : null}
</div>
);
}
}
Background.Color = Color;
Background.Image = Image;
export default Background;

245
packages/editor-setters/src/style-setter/lc-style-setter/background/parser.js
View File

@ -1,245 +0,0 @@
import valueParser, { stringify } from 'postcss-value-parser';
import namedColors from 'css-color-names';
const RE_BOX = /^(border-box|padding-box|content-box|text)$/i;
const RE_LENGTH_PERCENTAGE = /^\d*(\.\d+)?(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|q|cm|in|pt|pc|%)?$/i;
const RE_POS_PRESET = /^(left|center|right|top|bottom)$/i;
const RE_SIZE_PRESET = /^(cover|contain)$/i;
const RE_IMAGE_FUNC = /^(url|image(-set)?|cross\-fade|element|((repeating-)?(linear|radial)\-)gradient)$/i; // eslint-disable-line
const RE_REPEAT = /^(repeat|repeat\-x|repeat\-y|no\-repeat|space|round)$/i;
const RE_COLOR_FUNC = /^(rgb|rgba|hsl|hsla)$/i;
const RE_COLOR_PRESET = /^(transparent|currentColor)$/i;
const RE_COLOR_HEX = /^#(?:[a-f0-9]{3})?(?:[a-f0-9]{3})$/;
const RE_ATTACHMENT = /^(scroll|fixed|local)$/i;
function isColorValue(word) {
return namedColors.hasOwnProperty(word) || RE_COLOR_PRESET.test(word) || RE_COLOR_HEX.test(word);
}
function isColorFunc(word) {
return RE_COLOR_FUNC.test(word);
}
function isColorNode(node) {
if (node.type === 'word') {
return isColorValue(node.value);
}
if (node.type === 'function') {
return isColorFunc(node.value);
}
return false;
}
function isImageFunc(word) {
return RE_IMAGE_FUNC.test(word);
}
function isImageNode(node) {
if (node.type === 'word') {
return node.value === 'none';
}
if (node.type === 'function') {
return isImageFunc(node.value);
}
return false;
}
function isRepeatNode(node) {
if (node.type === 'word') {
return RE_REPEAT.test(node.value);
}
return false;
}
function isAttachmentNode(node) {
if (node.type === 'word') {
return RE_ATTACHMENT.test(node.value);
}
return false;
}
function isBoxNode(node) {
if (node.type === 'word') {
return RE_BOX.test(node.value);
}
return false;
}
function isPostionValue(word) {
return RE_LENGTH_PERCENTAGE.test(word) || RE_POS_PRESET.test(word);
}
function isPositionNode(node) {
if (node.type === 'word') {
return isPostionValue(node.value);
}
return false;
}
function isSizePreset(word) {
return RE_SIZE_PRESET.test(word);
}
function isSizeValue(word) {
return RE_LENGTH_PERCENTAGE.test(word) || word === 'auto' || isSizePreset(word);
}
function isSizeNode(node) {
if (node.type === 'word') {
return isSizeValue(node.value);
}
return false;
}
function eatSpace(nodes, index) {
const node = nodes[index];
if (!node || node.type !== 'space') {
return index;
}
return index + 1;
}
function readValue(nodes, index, store) {
const node = nodes[index];
// color
if (isColorNode(node)) {
store['background-color'] = stringify(node);
return index + 1;
}
// image
if (isImageNode(node)) {
store['background-image'] = stringify(node);
return index + 1;
}
// attchment
if (isAttachmentNode(node)) {
store['background-attachment'] = stringify(node);
return index + 1;
}
// repeat
if (isRepeatNode(node)) {
let repeat = stringify(node);
index = eatSpace(nodes, index + 1);
const sibling = nodes[index];
if (sibling && isRepeatNode(sibling)) {
repeat = `${repeat} ${stringify(sibling)}`;
index += 1;
}
store['background-repeat'] = repeat;
return index;
}
// origin & clip
if (isBoxNode(node)) {
let origin = stringify(node);
let clip = null;
if (origin === 'text') {
clip = origin;
origin = null;
}
index = eatSpace(nodes, index + 1);
const sibling = nodes[index];
if (sibling && isBoxNode(sibling)) {
if (clip) {
origin = stringify(sibling);
} else {
clip = stringify(sibling);
}
index += 1;
}
if (origin) {
store['background-origin'] = origin;
}
if (clip) {
store['background-clip'] = clip;
}
return index;
}
// position & size
if (isPositionNode(node)) {
let position = stringify(node);
let size = null;
index = eatSpace(nodes, index + 1);
let sibling = nodes[index];
if (sibling && isPositionNode(sibling)) {
position = `${position} ${stringify(sibling)}`;
index = eatSpace(nodes, index + 1);
sibling = nodes[index];
}
if (sibling && sibling.type === 'div' && sibling.value === '/') {
index = eatSpace(nodes, index + 1);
sibling = nodes[index];
if (sibling && isSizeNode(sibling)) {
size = stringify(sibling);
if (!isSizePreset(size)) {
index = eatSpace(nodes, index + 1);
sibling = nodes[index];
if (sibling && isSizeNode(sibling)) {
size = `${size} ${stringify(sibling)}`;
index += 1;
}
}
}
}
store['background-position'] = position;
if (size) {
store['background-size'] = size;
}
return index;
}
return index + 1;
}
function parser(bakcground) {
const nodes = valueParser(typeof bakcground === 'string' ? bakcground : '').nodes;
const l = nodes.length;
const items = [];
let item;
const append = () => {
item = {};
items.push(item);
};
append();
let node;
let type;
let value;
let i = 0;
while (i < l) {
node = nodes[i];
type = node.type;
value = node.value;
if (type === 'word' || type === 'function') {
i = readValue(nodes, i, item);
continue;
}
i++;
// div = ,
if (type === 'div' && value === ',') {
append();
}
}
return items;
}
function build(bg) {
if (Array.isArray(bg)) {
return bg.map(build).join(',');
}
let pos = bg['background-position'];
if (pos && bg['background-size']) {
pos = `${pos}/${bg['background-size']}`;
}
return ['image', 'repeat', 'attachment', 'position', 'origin', 'clip', 'color'].map(key => {
return (key === 'position' ? pos : bg[`background-${key}`]) || '';
}).filter(item => item !== '').join(' ');
}
parser.build = build;
export default parser;

292
packages/editor-setters/src/style-setter/lc-style-setter/background/position.js
View File

@ -1,292 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import Field from '@ali/ve-field';
import Icons from '@ali/ve-icons';
import NumberControl from '@ali/ve-number-control';
import utils from '../utils';
import $i18n from '../i18n/index';
function isZero(v) {
return v === 0 || /^0(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|q|cm|in|pt|pc|%)?$/.test(v);
}
const offsetPresets = [
{
title: 'left top',
value: { X: '0%', Y: '0%' },
test({ x, y }) {
return (isZero(x) || x === 'left') && (isZero(y) || y === 'top');
},
},
{
title: 'center top',
value: { X: '50%', Y: '0%' },
test({ x, y }) {
return (x === '50%' || x === 'center') && (isZero(y) || y === 'top');
},
},
{
title: 'right top',
value: { X: '100%', Y: '0%' },
test({ x, y }) {
return (x === '100%' || x === 'right') && (isZero(y) || y === 'top');
},
},
{
title: 'left center',
value: { X: '0%', Y: '50%' },
test({ x, y }) {
return (isZero(x) || x === 'left') && (y === '50%' || y === 'center');
},
},
{
title: 'center',
value: { X: '50%', Y: '50%' },
test({ x, y }) {
return (x === '50%' || x === 'center') && (y === '50%' || y === 'center');
},
},
{
title: 'right center',
value: { X: '100%', Y: '50%' },
test({ x, y }) {
return (x === '100%' || x === 'right') && (y === '50%' || y === 'center');
},
},
{
title: 'left bottom',
value: { X: '0%', Y: '100%' },
test({ x, y }) {
return (isZero(x) || x === 'left') && (y === '100%' || y === 'bottom');
},
},
{
title: 'center bottom',
value: { X: '50%', Y: '100%' },
test({ x, y }) {
return (x === '50%' || x === 'center') && (y === '100%' || y === 'bottom');
},
},
{
title: 'right bottom',
value: { X: '100%', Y: '100%' },
test({ x, y }) {
return (x === '100%' || x === 'right') && (y === '100%' || y === 'bottom');
},
},
];
class Presets extends Component {
static propTypes = {
value: PropTypes.object,
onChange: PropTypes.func,
};
render() {
const { value, onChange } = this.props;
const presets = offsetPresets.map((item, index) => {
const className = classNames('vs-preset-item', `vs-preset-${item.title.replace(' ', '-')}`, {
've-active': item.test(value),
});
return (
<span
key={index}
className={className}
data-tip={item.title}
onClick={() => onChange(item.value)}
>
<Icons name={`style.${item.title === 'center' ? 'center' : 'dir'}`} size="12px" />
</span>
);
});
return <div className="vs-style-position-preset">{presets}</div>;
}
}
const RE_PERCENT = /^\d*(\.\d+)?%$/;
function isPercent(val) {
return RE_PERCENT.test(val);
}
function normalizePosition(pos, x, y) {
if (utils.isEmptyCssValue(pos) || pos === 'initial') {
return {
x,
y,
effects: {
x: utils.notEmptyValue(x, '0%'),
y: utils.notEmptyValue(y, '0%'),
},
};
}
const xy = pos.split(/\s+/);
if (utils.isEmptyCssValue(x)) {
x = xy[0];
}
if (utils.isEmptyCssValue(y)) {
y = xy[1];
}
const effects = { x, y };
const ret = { x, y, effects };
if (utils.isEmptyCssValue(y)) {
if (isPercent(x)) {
effects.y = '50%';
} else if (x === 'left' || x === 'right' || x === 'center') {
effects.y = 'center';
} else if (x === 'top' || x === 'bottom') {
effects.y = x;
effects.x = 'center';
ret.y = x;
ret.x = '';
}
} else if (x === 'top' || x === 'bottom' || y === 'left' || y === 'right') {
effects.y = x;
effects.x = y;
ret.y = x;
ret.x = y;
}
return ret;
}
class Offset extends Component {
static propTypes = {
current: PropTypes.any,
effects: PropTypes.any,
onChange: PropTypes.func,
};
render() {
return (
<NumberControl
value={this.props.current}
placeholder={this.props.effects}
units={[
{
type: '%',
list: true,
},
{
type: 'left',
preset: true,
},
{
type: 'right',
preset: true,
},
{
type: 'center',
preset: true,
},
{
type: 'top',
preset: true,
},
{
type: 'bottom',
preset: true,
},
'px',
'em',
'rem',
'pt',
'ex',
'ch',
'vh',
'vw',
'vmin',
'vmax',
'mm',
'q',
'cm',
'in',
'pc',
]}
onChange={this.props.onChange}
/>
);
}
}
class Position extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleBackgrounPositionSetter';
setPosition(x, y) {
if (utils.isEmptyCssValue(x) || utils.isEmptyCssValue(y)) {
utils.setBackground(this.props, 'background-position', null);
utils.setPropertyValue(this.props, 'background-position-x', x);
utils.setPropertyValue(this.props, 'background-position-y', y);
} else {
utils.setBackground(this.props, 'background-position', `${x} ${y}`);
utils.setPropertyValue(this.props, 'background-position-x', null);
utils.setPropertyValue(this.props, 'background-position-y', null);
}
}
render() {
const className = classNames('vs-style-background-position', this.props.className);
const { current, inherit } = utils.getBackground(this.props, 'background-position');
const x = utils.getPropertyValue(this.props, 'background-position-x');
const y = utils.getPropertyValue(this.props, 'background-position-y');
const currentXY = normalizePosition(current, x.current, y.current);
const inheritXY = normalizePosition(inherit, x.inherit, y.inherit);
const effects = {
x: utils.notEmptyValue(currentXY.effects.x, inheritXY.effects.x),
y: utils.notEmptyValue(currentXY.effects.y, inheritXY.effects.y),
};
return (
<div className={className}>
<Presets value={effects} onChange={({ X, Y }) => this.setPosition(X, Y)} />
<div className="vs-style-position-custom">
<Field
display="inline"
title={(
<span data-tip={$i18n.get({ id: 'styleLateralOffset', dm: '横向偏移' })}>
<Icons name="style.offset" className="vs-style-rotate-90-r" size="14px" />
</span>
)}
>
<Offset
current={currentXY.x}
effects={effects.x}
onChange={value => this.setPosition(value, currentXY.y)}
/>
</Field>
<Field
display="inline"
title={(
<span data-tip={$i18n.get({ id: 'styleVerticalOffset', dm: '纵向偏移' })}>
<Icons name="style.offset" size="14px" />
</span>
)}
>
<Offset
current={currentXY.y}
effects={effects.y}
onChange={value => this.setPosition(currentXY.x, value)}
/>
</Field>
</div>
</div>
);
}
}
export default Position;

47
packages/editor-setters/src/style-setter/lc-style-setter/background/repeat.js
View File

@ -1,47 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import ChoiceControl from '@ali/ve-choice-control';
import Icons from '@ali/ve-icons';
import utils from '../utils';
const repeats = [{
title: <Icons name="style.repeat-a" size="12px" />,
value: 'repeat',
}, {
title: <Icons name="style.repeat-x" size="12px" />,
value: 'repeat-x',
}, {
title: <Icons name="style.repeat-y" size="12px" />,
value: 'repeat-y',
}, {
title: <Icons name="style.no" size="12px" />,
value: 'no-repeat',
}];
class Repeat extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleBackgrounRepeatSetter';
setRepeat(repeat) {
utils.setBackground(this.props, 'background-repeat', repeat);
}
render() {
const className = classNames('vs-style-background-repeat', this.props.className);
const repeat = utils.getBackground(this.props, 'background-repeat').value;
return (
<ChoiceControl
className={className}
value={repeat}
options={repeats}
onChange={(value) => this.setRepeat(value)}
/>
);
}
}
export default Repeat;

174
packages/editor-setters/src/style-setter/lc-style-setter/background/size.js
View File

@ -1,174 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import ChoiceControl from '@ali/ve-choice-control';
import NumberControl from '@ali/ve-number-control';
import Icons from '@ali/ve-icons';
import Field from '@ali/ve-field';
import utils from '../utils';
import $i18n from '../i18n/index';
const RE_SIZE_PRESETS = /^(cover|contain)$/i;
function getEffects(current, inherit) {
const size = utils.isEmptyCssValue(current) || current === 'initial' ? inherit : current;
if (utils.isEmptyCssValue(size) || RE_SIZE_PRESETS.test(size)) {
return { x: 'auto', y: 'auto' };
}
const xy = size.split(/\s+/);
return {
x: utils.isEmptyCssValue(xy[0]) ? 'auto' : xy[0],
y: utils.isEmptyCssValue(xy[1]) ? 'auto' : xy[1],
};
}
function normalizeCurrent(current) {
if (utils.isEmptyCssValue(current) || current === 'initial' || RE_SIZE_PRESETS.test(current)) {
return {
x: '',
y: '',
};
}
const xy = current.split(/\s+/);
return {
x: utils.isEmptyCssValue(xy[0]) ? '' : xy[0],
y: utils.isEmptyCssValue(xy[1]) ? '' : xy[1],
};
}
class SizeItem extends Component {
static propTypes = {
current: PropTypes.any,
effects: PropTypes.any,
onChange: PropTypes.func,
};
render() {
return (
<NumberControl
value={this.props.current}
placeholder={this.props.effects}
min={0}
units={[
{
type: 'px',
list: true,
},
{
type: '%',
list: true,
},
{
type: 'auto',
preset: true,
},
'em',
'rem',
'pt',
'ex',
'ch',
'vh',
'vw',
'vmin',
'vmax',
'mm',
'q',
'cm',
'in',
'pc',
]}
onChange={this.props.onChange}
/>
);
}
}
class Size extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleBackgrounSizeSetter';
setSize(sizeX, sizeY) {
let size;
if (utils.isEmptyCssValue(sizeX) && utils.isEmptyCssValue(sizeY)) {
size = '';
} else if (RE_SIZE_PRESETS.test(sizeX) || utils.isEmptyCssValue(sizeY)) {
size = sizeX;
} else if (utils.isEmptyCssValue(sizeX) && !utils.isEmptyCssValue(sizeY)) {
size = `auto ${sizeY}`;
} else {
size = `${sizeX} ${sizeY}`;
}
utils.setBackground(this.props, 'background-size', size);
}
render() {
const className = classNames('vs-style-background-size', this.props.className);
const { current, inherit, value } = utils.getBackground(this.props, 'background-size');
const currentXY = normalizeCurrent(current);
const effects = getEffects(current, inherit);
return (
<div className={className}>
<ChoiceControl
className="vs-style-bgsize-preset"
options={[
{
title: <Icons name="style.cover" size="medium" />,
value: 'cover',
},
{
title: <Icons name="style.contain" size="medium" />,
value: 'contain',
},
]}
value={value}
onChange={val => this.setSize(val, null)}
loose
/>
<div className="vs-style-bgsize-custom">
<Field
display="inline"
title={(
<span data-tip={$i18n.get({ id: 'styleWidth', dm: '宽度' })}>
<Icons name="style.height" className="vs-style-rotate-90" size="14px" />
</span>
)}
>
<SizeItem
current={currentXY.x}
effects={effects.x}
onChange={val => this.setSize(val, currentXY.y)}
/>
</Field>
<Field
display="inline"
title={(
<span data-tip={$i18n.get({ id: 'styleHeight', dm: '高度' })}>
<Icons name="style.height" size="14px" />
</span>
)}
>
<SizeItem
current={currentXY.y}
effects={effects.y}
onChange={val => this.setSize(currentXY.x, val)}
/>
</Field>
</div>
</div>
);
}
}
export default Size;

186
packages/editor-setters/src/style-setter/lc-style-setter/border/border.js
View File

@ -1,186 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import Field from '@ali/ve-field';
import SelectControl from '@ali/ve-select-control';
import NumberControl from '@ali/ve-number-control';
import ColorControl from '@ali/ve-color-control';
import borderParser from './borderParser';
import utils from '../utils';
import $i18n from '../i18n/index';
const BORDER_STYLES = {
none: $i18n.get({ id: 'styleNo', dm: '无' }),
solid: $i18n.get({ id: 'styleSolidLine', dm: '实线' }),
dotted: $i18n.get({ id: 'styleDottedLine', dm: '点线' }),
dashed: $i18n.get({ id: 'styleDottedLine.1', dm: '虚线' }),
};
const borderStyles = Object.keys(BORDER_STYLES).map(i => ({
text: BORDER_STYLES[i],
value: i,
}));
class BorderStyle extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleBorderSetter';
static transducer = utils.transducer;
state = {
// state variable to indicate which border have use selected
// enum: border-left | border-right | border-top | border-bottom | border
currentSelected: 'border',
};
componentWillMount() {
}
componentWillUnmount() {
}
setValue(type, val, props) {
if (this.state.currentSelected === 'border') {
utils.setPropertyValue(props, `border-${type}`, val);
} else {
utils.setPropertyValue(props, `${this.state.currentSelected}-${type}`, val);
}
}
changeSelectedBorder(type) {
this.setState({ currentSelected: type });
}
render() {
const className = classNames('vs-style-border-style', this.props.className);
const border = borderParser(this.props, this.state.currentSelected);
const { current, inherit } = border;
const borderWidth = current.width;
const borderColor = current.color;
const borderStyle = current.style;
const inheritWidth = inherit.width || '0px';
const inheritColor = inherit.color || '#000';
const inheritStyle = inherit.style || 'none';
return (
<div className={className}>
<div className="vs-style-border-setter-left-pane">
<div className="vs-style-border-setter-row">
<div
onClick={this.changeSelectedBorder.bind(this, 'border-left')}
className={
this.state.currentSelected === 'border-left' ? 'vs-style-border-selected' : ''
}
>
<span data-tip={$i18n.get({ id: 'styleLeftBorder', dm: '左边框' })}>┣</span>
</div>
</div>
<div className="vs-style-border-setter-row">
<div
onClick={this.changeSelectedBorder.bind(this, 'border-top')}
className={
this.state.currentSelected === 'border-top' ? 'vs-style-border-selected' : ''
}
>
<span data-tip={$i18n.get({ id: 'styleTopBorder', dm: '上边框' })}>┳</span>
</div>
<div
onClick={this.changeSelectedBorder.bind(this, 'border')}
className={this.state.currentSelected === 'border' ? 'vs-style-border-selected' : ''}
>
<span data-tip={$i18n.get({ id: 'styleAll', dm: '全部' })}>╋</span>
</div>
<div
onClick={this.changeSelectedBorder.bind(this, 'border-bottom')}
className={
this.state.currentSelected === 'border-bottom' ? 'vs-style-border-selected' : ''
}
>
<span data-tip={$i18n.get({ id: 'styleBottomBorder', dm: '下边框' })}>┻</span>
</div>
</div>
<div className="vs-style-border-setter-row">
<div
onClick={this.changeSelectedBorder.bind(this, 'border-right')}
className={
this.state.currentSelected === 'border-right' ? 'vs-style-border-selected' : ''
}
>
<span data-tip={$i18n.get({ id: 'styleRightBorder', dm: '右边框' })}>┫</span>
</div>
</div>
</div>
<div className="vs-style-border-setter-right-pane">
<Field
display="inline"
title={$i18n.get({ id: 'styleLinear', dm: '线形' })}
compact
highlight={borderStyle}
>
<SelectControl
key={this.state.currentSelected}
value={borderStyle || inheritStyle}
onChange={(val) => {
this.setValue('style', val, this.props);
}}
options={borderStyles}
/>
</Field>
<Field
display="inline"
title={$i18n.get({ id: 'styleWidth', dm: '宽度' })}
compact
highlight={borderWidth}
>
<NumberControl
key={this.state.currentSelected}
placeholder={inheritWidth}
value={borderWidth}
onChange={(val) => {
this.setValue('width', val, this.props);
}}
min={0}
units={[
{
type: 'px',
list: true,
},
{
type: '%',
list: true,
},
{
type: 'em',
list: true,
},
]}
/>
</Field>
<Field
display="inline"
title={$i18n.get({ id: 'styleColour', dm: '颜色' })}
compact
highlight={borderColor}
>
<ColorControl
key={this.state.currentSelected}
placeholder={inheritColor}
value={borderColor}
onChange={(val) => {
this.setValue('color', val, this.props);
}}
/>
</Field>
</div>
</div>
);
}
}
export default BorderStyle;

141
packages/editor-setters/src/style-setter/lc-style-setter/border/borderParser.js
View File

@ -1,141 +0,0 @@
import compose from 'lodash.flow';
import curry from 'lodash.curry';
import zipObject from 'lodash.zipobject';
import { parse as parseBorder } from 'css-border-property';
import utils from '../utils';
// const logger = (val) => {
// console.log(val);
// return val;
// };
const keys = Object.keys;
const getProp = p => (v => v[p]);
const stateMutator = {
setKey: (s, k, r) => {
s[k].c = r['border-color'];
s[k].s = r['border-style'];
s[k].w = r['border-width'];
},
setKeyOnly: (s, k, k2, r, o) => {
s[k][k2] = r[o];
},
border: (s, r) => keys(s).forEach(k => stateMutator.setKey(s, k, r)),
'border-left': (s, r) => stateMutator.setKey(s, 'l', r),
'border-right': (s, r) => stateMutator.setKey(s, 'r', r),
'border-top': (s, r) => stateMutator.setKey(s, 't', r),
'border-bottom': (s, r) => stateMutator.setKey(s, 'b', r),
'border-style': (s, r) => keys(s).forEach(k => { s[k].s = r['border-style']; }),
'border-width': (s, r) => keys(s).forEach(k => { s[k].w = r['border-width']; }),
'border-color': (s, r) => keys(s).forEach(k => { s[k].c = r['border-color']; }),
'border-left-color': (s, r) => stateMutator.setKeyOnly(s, 'l', 'c', r, 'border-color'),
'border-left-width': (s, r) => stateMutator.setKeyOnly(s, 'l', 'w', r, 'border-width'),
'border-left-style': (s, r) => stateMutator.setKeyOnly(s, 'l', 's', r, 'border-style'),
'border-right-color': (s, r) => stateMutator.setKeyOnly(s, 'r', 'c', r, 'border-color'),
'border-right-width': (s, r) => stateMutator.setKeyOnly(s, 'r', 'w', r, 'border-width'),
'border-right-style': (s, r) => stateMutator.setKeyOnly(s, 'r', 's', r, 'border-style'),
'border-top-color': (s, r) => stateMutator.setKeyOnly(s, 't', 'c', r, 'border-color'),
'border-top-width': (s, r) => stateMutator.setKeyOnly(s, 't', 'w', r, 'border-width'),
'border-top-style': (s, r) => stateMutator.setKeyOnly(s, 't', 's', r, 'border-style'),
'border-bottom-color': (s, r) => stateMutator.setKeyOnly(s, 'b', 'c', r, 'border-color'),
'border-bottom-width': (s, r) => stateMutator.setKeyOnly(s, 'b', 'w', r, 'border-width'),
'border-bottom-style': (s, r) => stateMutator.setKeyOnly(s, 'b', 's', r, 'border-style'),
};
const mergeToObj = val => zipObject(val.map(getProp('property')), val.map(getProp('value')));
const mapRuleToState = (rule, ruleState, applyFn) => {
const val = parseBorder(typeof rule === 'string' ? rule : '');
const r = mergeToObj(val);
applyFn.call(null, ruleState, r);
return ruleState;
};
const mapStateToCurrentValue = (state, type) => {
switch (type) {
case 'border':
return {
// @todo consider to convert color to judge equal
color: keys(state).every(k => state[k].c === state.l.c)
? state.l.c : '',
style: keys(state).every(k => state[k].s === state.l.s)
? state.l.s : '',
width: keys(state).every(k => state[k].w === state.l.w)
? state.l.w : '',
};
case 'border-left':
return {
color: state.l.c,
style: state.l.s,
width: state.l.w,
};
case 'border-right':
return {
color: state.r.c,
style: state.r.s,
width: state.r.w,
};
case 'border-top':
return {
color: state.t.c,
style: state.t.s,
width: state.t.w,
};
case 'border-bottom':
return {
color: state.b.c,
style: state.b.s,
width: state.b.w,
};
default:
}
return {
color: '',
style: '',
width: '',
};
};
const getEmptyRuleSet = () => ({
l: { c: '', s: '', w: '' }, // left: color | style | width
r: { c: '', s: '', w: '' }, // right: color | style | width
t: { c: '', s: '', w: '' }, // top: color | style | width
b: { c: '', s: '', w: '' }, // bottom: color | style | width
});
export const parseToBorder = curry((type, mapfn, rules) => {
const ruleState = Object.assign({}, getEmptyRuleSet());
rules.forEach(rule => mapRuleToState(rule[1], ruleState, stateMutator[rule[0]]));
return mapfn(ruleState, type);
});
const getRule = (rules, fn = v => v) => {
return fn(rules);
};
export const getRelatedRules = (rules, mutator) => {
const filterRules = ruleSet => keys(ruleSet)
.filter(v => !!mutator[v])
.map(n => [n, getRule(rules)[n]]);
return getRule(rules, filterRules);
};
export default function borderParser(props, state, mutator = stateMutator) {
const rules = props.value || props.defaultValue || {};
const current = compose(
getRelatedRules,
// logger,
parseToBorder(state, mapStateToCurrentValue),
)(rules, mutator);
const inheritStr = utils.getInheritPropertyValue(
rules, state, props.node);
const inheritValue = mergeToObj(parseBorder(typeof inheritStr !== 'string' ? '' : inheritStr));
const inherit = {
color: inheritValue['border-color'],
style: inheritValue['border-style'],
width: inheritValue['border-width'],
};
return { current, inherit, value: utils.notEmptyValue(current, inherit) };
}

33
packages/editor-setters/src/style-setter/lc-style-setter/border/index.js
View File

@ -1,33 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import BorderStyle from './border';
import BorderRadius from './radius';
import utils from '../utils';
class Border extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
}
static displayName = 'StyleBorderSetter';
static transducer = utils.transducer;
// shouldComponentUpdate() {
// return false;
// }
render() {
const className = classNames('vs-style-border', this.props.className);
return (
<div className={className}>
<BorderStyle {...this.props} />
<BorderRadius {...this.props} />
</div>
);
}
}
export default Border;

141
packages/editor-setters/src/style-setter/lc-style-setter/border/radius.js
View File

@ -1,141 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import Field from '@ali/ve-field';
import NumberControl from '@ali/ve-number-control';
import radiusParser from './radiusParser';
import utils from '../utils';
import $i18n from '../i18n/index';
class RadiusStyle extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'BorderRadiusStyleSetter';
static transducer = utils.transducer;
state = {
// state variable to indicate which border have use selected
// enum: border-top-left | border-top-right
// border-bottom-left | border-bottom-right | border
currentSelected: 'border',
};
componentWillMount() {
}
componentWillUnmount() {
}
setValue(val, props) {
if (this.state.currentSelected === 'border') {
utils.setPropertyValue(props, 'border-radius', val);
} else {
utils.setPropertyValue(props, `${this.state.currentSelected}-radius`, val);
}
}
changeSelectedRadius(type) {
this.setState({ currentSelected: type });
}
render() {
const className = classNames('vs-style-border-radius', this.props.className);
const radius = radiusParser(this.props, `${this.state.currentSelected}-radius`);
const radiusCurrent = radius.current;
const radiusInherit = radius.inherit;
return (
<div className={className}>
<div className="vs-style-border-setter-left-pane">
<div className="vs-style-border-setter-row">
<div
onClick={this.changeSelectedRadius.bind(this, 'border-top-left')}
className={
this.state.currentSelected === 'border-top-left' ? 'vs-style-border-selected' : ''
}
>
<span data-tip={$i18n.get({ id: 'styleUpperLeftCorner', dm: '左上角' })}>┏</span>
</div>
<div
onClick={this.changeSelectedRadius.bind(this, 'border-bottom-left')}
className={
this.state.currentSelected === 'border-bottom-left'
? 'vs-style-border-selected'
: ''
}
>
<span data-tip={$i18n.get({ id: 'styleBottomRightCorner', dm: '右下角' })}>┗</span>
</div>
</div>
<div className="vs-style-border-setter-row">
<div
onClick={this.changeSelectedRadius.bind(this, 'border')}
className={this.state.currentSelected === 'border' ? 'vs-style-border-selected' : ''}
>
<span data-tip={$i18n.get({ id: 'styleAll', dm: '全部' })}>╋</span>
</div>
</div>
<div className="vs-style-border-setter-row">
<div
onClick={this.changeSelectedRadius.bind(this, 'border-top-right')}
className={
this.state.currentSelected === 'border-top-right' ? 'vs-style-border-selected' : ''
}
>
<span data-tip={$i18n.get({ id: 'styleUpperRightCorner', dm: '右上角' })}>┓</span>
</div>
<div
onClick={this.changeSelectedRadius.bind(this, 'border-bottom-right')}
className={
this.state.currentSelected === 'border-bottom-right'
? 'vs-style-border-selected'
: ''
}
>
<span data-tip={$i18n.get({ id: 'styleBottomRightCorner', dm: '右下角' })}>┛</span>
</div>
</div>
</div>
<div className="vs-style-border-setter-right-pane">
<Field
display="inline"
title={$i18n.get({ id: 'styleFillet', dm: '圆角' })}
compact
highlight={utils.getCurrentPropertyHighlight(this.props, 'border-radius')}
>
<NumberControl
key={this.state.currentSelected}
placeholder={radiusInherit}
onChange={(val) => {
this.setValue(val, this.props);
}}
value={radiusCurrent || null}
min={0}
units={[
{
type: 'px',
list: true,
},
{
type: '%',
list: true,
},
{
type: 'em',
list: true,
},
]}
/>
</Field>
</div>
</div>
);
}
}
export default RadiusStyle;

54
packages/editor-setters/src/style-setter/lc-style-setter/border/radiusParser.js
View File

@ -1,54 +0,0 @@
import compose from 'lodash.flow';
import curry from 'lodash.curry';
import { getRelatedRules } from './borderParser';
import utils from '../utils';
const keys = Object.keys;
const getRadiusEmptyState = () => ({
tl: null,
tr: null,
bl: null,
br: null,
});
const stateMutator = {
'border-radius': (s, r) => keys(s).forEach(k => { s[k] = r; }),
'border-top-left-radius': (s, r) => { s.tl = r; },
'border-top-right-radius': (s, r) => { s.tr = r; },
'border-bottom-left-radius': (s, r) => { s.bl = r; },
'border-bottom-right-radius': (s, r) => { s.br = r; },
};
const mapStateToCurrentValue = (state, type) => {
switch (type) {
case 'border-radius':
return keys(state).every(k => state[k] === state.tl) ? state.tl : null;
case 'border-top-left-radius':
return state.tl;
case 'border-top-right-radius':
return state.tr;
case 'border-bottom-left-radius':
return state.bl;
case 'border-bottom-right-radius':
return state.br;
default:
break;
}
return null;
};
const parseToRadius = curry((type, mapfn, rules) => {
const ruleState = Object.assign({}, getRadiusEmptyState());
rules.forEach(rule => stateMutator[rule[0]](ruleState, rule[1]));
return mapfn(ruleState, type);
});
export default function radiusParser(props, state) {
const rules = props.value || props.defaultValue || {};
const current = compose(
getRelatedRules,
parseToRadius(state, mapStateToCurrentValue)
)(rules, stateMutator);
const inherit = utils.getInheritPropertyValue(
rules, state, props.node);
return { current, inherit, value: utils.notEmptyValue(current, inherit) };
}

46
packages/editor-setters/src/style-setter/lc-style-setter/effects/cursor.js
View File

@ -1,46 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import SelectControl from '@ali/ve-select-control';
import Icons from '@ali/ve-icons';
import utils from '../utils';
const CURSOR_TYPE = ['default', 'pointer'];
class Cursor extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleOpacitySetter';
static transducer = utils.transducer;
componentWillMount() {
}
componentWillUnmount() {
}
render() {
const className = classNames('vs-style-cursor', this.props.className);
const cursor = utils.getPropertyValue(this.props, 'cursor');
const options = CURSOR_TYPE.map((item, index) => ({
text: <div key={index}><Icons name={`style.cursor-${item}`} size="small" />{item}</div>,
value: item,
}));
return (
<SelectControl
className={className}
value={cursor.value}
options={options}
onChange={(val) => utils.setPropertyValue(this.props, 'cursor', val)}
min={0}
max={100}
syncTargetWidth
/>
);
}
}
export default Cursor;

67
packages/editor-setters/src/style-setter/lc-style-setter/effects/index.js
View File

@ -1,67 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import Icons from '@ali/ve-icons';
import Field from '@ali/ve-field';
import Opacity from './opacity';
import Cursor from './cursor';
import Shadow from './shadow';
import utils from '../utils';
import $i18n from '../i18n/index';
class Effects extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleEffectsSetter';
static transducer = utils.transducer;
componentWillMount() {
}
// shouldComponentUpdate() {
// return false;
// }
componentWillUnmount() {
}
render() {
const className = classNames('vs-style-effects', this.props.className);
return (
<div className={className}>
<Field
display="inline"
highlight={utils.getCurrentPropertyHighlight(this.props, 'opacity')}
title={(
<span data-tip={$i18n.get({ id: 'styleTransparency', dm: '透明度' })}>
<Icons name="style.opacity" size="medium" />
</span>
)}
>
<Opacity {...this.props} />
</Field>
<Field
display="inline"
highlight={utils.getCurrentPropertyHighlight(this.props, 'cursor')}
title={(
<span data-tip={$i18n.get({ id: 'styleMouseGesture', dm: '鼠标手势' })}>
<Icons name="style.cursor" size="small" />
</span>
)}
>
<Cursor {...this.props} />
</Field>
<Shadow {...this.props} />
</div>
);
}
}
export default Effects;

47
packages/editor-setters/src/style-setter/lc-style-setter/effects/opacity.js
View File

@ -1,47 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import NumberControl from '@ali/ve-number-control';
import utils from '../utils';
class Opacity extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleOpacitySetter';
static transducer = utils.transducer;
componentWillMount() {
}
componentWillUnmount() {
}
render() {
const className = classNames('vs-style-opacity', this.props.className);
const opacity = utils.getPropertyValue(this.props, 'opacity');
const getFloat = v => parseFloat(v).toFixed(2);
const current = opacity.current ? `${parseInt(opacity.current * 100, 10)}%` : null;
return (
<NumberControl
className={className}
placeholder={`${getFloat(opacity.inherit) * 100}%`}
value={current}
onChange={(val) => {
const value = (parseFloat((val.split('%')[0])) / 100).toFixed(2);
utils.setPropertyValue(this.props, 'opacity', value);
}}
min={0}
max={100}
units={[{
type: '%',
list: true,
}]}
/>
);
}
}
export default Opacity;

210
packages/editor-setters/src/style-setter/lc-style-setter/effects/shadow.js
View File

@ -1,210 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import Field from '@ali/ve-field';
import Icons from '@ali/ve-icons';
import NumberControl from '@ali/ve-number-control';
import ColorControl from '@ali/ve-color-control';
import utils from '../utils';
import $i18n from '../i18n/index';
const generateShadow = (c = 'rgba(0,0,0,0)', x = '0', y = '0', b = '0', s = '0') => `${c} ${x} ${y} ${b} ${s}`;
class Shadow extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleShadowSetter';
static transducer = utils.transducer;
componentWillMount() {
}
componentWillUnmount() {
}
render() {
const className = classNames('vs-style-shadow', this.props.className);
const shadow = utils.getPropertyValue(this.props, 'box-shadow').value;
let c = ''; // color
let x = ''; // x
let y = ''; // y
let b = ''; // blur
let s = ''; // spread
// @todo shadow parser 比较复杂考虑情况比较多，这里有明显的 Bug
// 由于时间问题，这里先留坑，满足可用性，后面有时间再来修复一下。
if (shadow !== 'none' && !!shadow && typeof shadow === 'string') {
const res = shadow.split(' ');
s = res.pop();
b = res.pop();
y = res.pop();
x = res.pop();
c = res.join(' ');
}
return (
<div>
<div className="ve-style-box-shadow-select">
<Field
display="inline"
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
title={(
<span data-tip={$i18n.get({ id: 'styleColour', dm: '颜色' })}>
<Icons name="style.fill" size="medium" />
</span>
)}
>
<ColorControl
value={c}
placeholder="#000"
onChange={(val) => {
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(val, x, y, b, s));
}}
/>
</Field>
</div>
<div className="ve-style-box-shadow-select">
<Field
display="inline"
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
title="X"
>
<NumberControl
className={className}
value={x}
placeholder="0"
onChange={(val) => {
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, val, y, b, s));
}}
min={0}
max={100}
units={[
{
type: 'px',
list: true,
},
{
type: '%',
list: true,
},
{
type: 'em',
list: true,
},
]}
/>
</Field>
<Field
display="inline"
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
title="Y"
>
<NumberControl
className={className}
placeholder="0"
value={y}
onChange={(val) => {
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, val, b, s));
}}
min={0}
max={100}
units={[
{
type: 'px',
list: true,
},
{
type: '%',
list: true,
},
{
type: 'em',
list: true,
},
]}
/>
</Field>
</div>
<div className="ve-style-box-shadow-select">
<Field
display="inline"
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
title={(
<span data-tip="blur">
<Icons name="style.blur" size="medium" />
</span>
)}
>
<NumberControl
className={className}
placeholder="0"
value={b}
onChange={(val) => {
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, y, val, s));
}}
min={0}
max={100}
units={[
{
type: 'px',
list: true,
},
{
type: '%',
list: true,
},
{
type: 'em',
list: true,
},
]}
/>
</Field>
<Field
display="inline"
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
title={(
<span data-tip="spread">
<Icons name="style.layer" size="small" />
</span>
)}
>
<NumberControl
value={s}
placeholder="0"
className={className}
onChange={(val) => {
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, y, b, val));
}}
min={0}
max={100}
units={[
{
type: 'px',
list: true,
},
{
type: '%',
list: true,
},
{
type: 'em',
list: true,
},
]}
/>
</Field>
</div>
</div>
);
}
}
export default Shadow;

45
packages/editor-setters/src/style-setter/lc-style-setter/i18n/index.js
View File

@ -1,45 +0,0 @@
const { provideIntl, destroyIntl } = require('@ali/intl-universal');
const strings = require('./strings');
let intl;
const MEDUSA_APP_NAME = 'legao-designer';
const PSEUDO_LANGUAGE_TAG = 'pd-KV';
const CURRENT_LANGUAGE = (window.locale || window.localStorage.getItem('vdev-locale') || '').replace(/_/, '-') || 'zh-CN';
function update(language) {
destroyIntl();
intl = provideIntl({
locale: language,
messagesAIO: strings,
});
}
function get(id, variable) {
if (!intl) update();
let string = '';
let key = '';
if (typeof id === 'string') {
key = id;
string = intl.formatMessage({ id }, variable);
}
if (typeof id === 'object' && id.dm) {
id.defaultMessage = id.dm;
}
key = id.id;
string = intl.formatMessage(id, variable);
if (CURRENT_LANGUAGE === PSEUDO_LANGUAGE_TAG) {
return `##@@@${key}##${MEDUSA_APP_NAME}@@@##${string}`;
}
return string;
}
if (PSEUDO_LANGUAGE_TAG === CURRENT_LANGUAGE) {
update('en-US');
} else {
update(CURRENT_LANGUAGE);
}
module.exports = {
get,
update,
};

72
packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/en-US.json
View File

@ -1,72 +0,0 @@
{
"styleImpactBlackBody": "Impact, black body",
"styleImpactMicrosoftYahei": "Impact, Microsoft Yahei",
"styleComicSansMSBlackbody": "Comic Sans MS, Blackbody",
"styleGeorgiaMicrosoftYahei": "Georgia, Microsoft Yahei",
"styleArialHelveticaBlackBody": "Arial, Helvetica, black body",
"styleLateralOffset": "Horizontal offset",
"styleAlign": "text-align",
"styleTrebuchetMSMicrosoftYahei": "Trebuchet MS, Microsoft Yahei",
"styleTrebuchetMSBlackBody": "Trebuchet MS, black body",
"styleArialHelveticaMicrosoftYahei": "Arial, Helvetica, Microsoft Yahei",
"styleLucidaSansUnicodeMicrosoft": "Lucida Sans Unicode, Microsoft Yahei",
"styleRowHeight": "line-height",
"styleFontColor": "font-color",
"styleSolidLine": "solid line",
"styleLinear": "style",
"styleLucidaConsoleBlackbody": "Lucida Console, Blackbody",
"styleStyle": "font-style",
"styleWordWeight": "font-width",
"styleLayout": "layout",
"styleSourceEditor": "Source editor",
"styleTopBorder": "Top border",
"styleStatus": "status",
"styleText": "Text",
"stylePleaseEnterAnAddress": "Please enter an address or paste upload",
"styleDefaultState": "Default state",
"styleRightBorder": "Right border",
"styleHigh": "high",
"styleBottomBorder": "Bottom border",
"styleTransparency": "opacity",
"styleBottomRightCorner": "Bottom right corner",
"styleUpperRightCorner": "Upper right corner",
"styleColour": "color",
"styleUnsupportedImage": "Unsupported image",
"styleTimesNewRomanBlackbody": "Times New Roman, Blackbody",
"styleLucidaConsoleMicrosoftYahei": "Lucida Console, Microsoft Yahei",
"styleDisplay": "display",
"styleFlexibleLayout": "Flexible layout",
"styleSize": "font-size",
"styleFillet": "radius",
"styleEffect": "effect",
"stylePositioning": "Positioning",
"styleLeftBorder": "Left border",
"styleBackground": "background",
"styleFillColor": "background-color",
"stylePalatinoLinotypeBlackBody": "Palatino Linotype, black body",
"styleFont": "font-family",
"styleMouseGesture": "cursor",
"styleAir": "empty",
"styleAll": "All",
"styleTimesNewRomanMicrosoft": "Times New Roman, Microsoft Yahei",
"styleUpperLeftCorner": "Upper left corner",
"styleCourierNewMicrosoftYahei": "Courier New, Microsoft Yahei",
"styleCourierNewBlackbody": "Courier New, Blackbody",
"styleFrame": "Border",
"styleImage": "background-image",
"styleComicSansMSMicrosoft": "Comic Sans MS, Microsoft Yahei",
"styleVerdanaBlackBody": "Verdana, black body",
"stylePalatinoLinotypeMicrosoftYahei": "Palatino Linotype, Microsoft Yahei",
"styleGeorgiaBlackbody": "Georgia, Blackbody",
"styleWidth": "width",
"styleVerticalOffset": "Vertical offset",
"styleModification": "text-decoration",
"styleHeight": "height",
"styleFixed": "fixed",
"styleLucidaSansUnicodeBlackbody": "Lucida Sans Unicode, Blackbody",
"styleVerdanaMicrosoftYahei": "Verdana, Microsoft Yahei",
"styleNo": "no",
"styleTile": "Tile",
"styleDottedLine": "dotted line",
"styleDottedLine.1": "dashed line"
}

4
packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/index.js
View File

@ -1,4 +0,0 @@
module.exports = {
'en-US': require('./en-US.json'),
'zh-CN': require('./zh-CN.json'),
};

72
packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/zh-CN.json
View File

@ -1,72 +0,0 @@
{
"styleAir": "空",
"stylePalatinoLinotypeMicrosoftYahei": "Palatino Linotype, 微软雅黑",
"styleMouseGesture": "鼠标手势",
"styleAll": "全部",
"styleImpactBlackBody": "Impact, 黑体",
"styleFont": "字体",
"styleFrame": "边框",
"styleImage": "图片",
"styleRowHeight": "行高",
"styleArialHelveticaMicrosoftYahei": "Arial, Helvetica, 微软雅黑",
"styleUpperLeftCorner": "左上角",
"styleCourierNewMicrosoftYahei": "Courier New, 微软雅黑",
"styleTimesNewRomanMicrosoft": "Times New Roman, 微软雅黑",
"styleFixed": "固定",
"styleModification": "修饰",
"stylePleaseEnterAnAddress": "请输入地址或粘贴上传",
"styleText": "文字",
"styleVerticalOffset": "纵向偏移",
"styleComicSansMSMicrosoft": "Comic Sans MS, 微软雅黑",
"styleLinear": "线形",
"styleWidth": "宽",
"styleVerdanaBlackBody": "Verdana, 黑体",
"styleGeorgiaBlackbody": "Georgia, 黑体",
"styleTrebuchetMSBlackBody": "Trebuchet MS, 黑体",
"styleFillet": "圆角",
"styleFlexibleLayout": "弹性布局",
"styleDottedLine": "点线",
"styleLeftBorder": "左边框",
"styleNo": "无",
"styleLucidaSansUnicodeBlackbody": "Lucida Sans Unicode, 黑体",
"styleLucidaConsoleMicrosoftYahei": "Lucida Console, 微软雅黑",
"styleSize": "大小",
"styleLateralOffset": "横向偏移",
"styleAlign": "对齐",
"styleImpactMicrosoftYahei": "Impact, 微软雅黑",
"styleArialHelveticaBlackBody": "Arial, Helvetica, 黑体",
"styleComicSansMSBlackbody": "Comic Sans MS, 黑体",
"stylePalatinoLinotypeBlackBody": "Palatino Linotype, 黑体",
"styleGeorgiaMicrosoftYahei": "Georgia, 微软雅黑",
"styleDefaultState": "默认状态",
"styleFontColor": "字体颜色",
"styleSolidLine": "实线",
"styleTrebuchetMSMicrosoftYahei": "Trebuchet MS, 微软雅黑",
"styleLucidaSansUnicodeMicrosoft": "Lucida Sans Unicode, 微软雅黑",
"styleStyle": "样式",
"styleTransparency": "透明度",
"styleSourceEditor": "源码编辑",
"styleStatus": "状态",
"styleHigh": "高",
"styleTopBorder": "上边框",
"styleBottomBorder": "下边框",
"styleRightBorder": "右边框",
"styleHeight": "高度",
"styleLayout": "布局",
"styleUnsupportedImage": "暂未支持的图片",
"styleLucidaConsoleBlackbody": "Lucida Console, 黑体",
"styleWordWeight": "字重",
"styleCourierNewBlackbody": "Courier New, 黑体",
"styleFillColor": "填充色",
"styleTile": "平铺",
"styleBackground": "背景",
"stylePositioning": "定位",
"styleEffect": "效果",
"styleBottomRightCorner": "右下角",
"styleDottedLine.1": "虚线",
"styleColour": "颜色",
"styleTimesNewRomanBlackbody": "Times New Roman, 黑体",
"styleUpperRightCorner": "右上角",
"styleVerdanaMicrosoftYahei": "Verdana, 微软雅黑",
"styleDisplay": "显示"
}

117
packages/editor-setters/src/style-setter/lc-style-setter/index.js
View File

@ -1,117 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import Field from '@ali/ve-field';
import { registerDict } from '@ali/ve-icons';
import { normalizeStyle } from '@ali/vu-css-style';
import Layout from './layout';
import Typography from './typography';
import Background from './background';
import Border from './border';
import Effects from './effects';
import utils from './utils';
import SvgLib from './svglib';
import './style.less';
import $i18n from './i18n/index';
registerDict('style', SvgLib);
/**
* state
* json: JSON模式
* ----
* layout
* display
* flexItem
* padding+margin
* size
* width
* height
* min+max advanced
* float advanced
* clear advanced
* overflow advanced
* position advanced
* background
* color
* image
* border
* border
* radius
* typography
* font-family
* color
* font-size
* text-align
* line-height
* font-weight
* text-decoration
* font-style
* letter-spacing advanced
* text-indent advanced
* text-transform advanced
* direction advanced
* effects
* opacity
* cursor
* svg
* fill
*/
class StyleSetter extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleSetter';
static transducer = utils.transducer;
static defaultProps = {
};
render() {
const className = classNames(
'vs-style',
'vs-style-advanced',
this.props.className,
);
// react style -> css style
const value = this.props.value ? normalizeStyle(this.props.value) : null;
const defaultValue = this.props.defaultValue ? normalizeStyle(this.props.defaultValue) : null;
const props = {...this.props, value, defaultValue};
return (
<div className={className}>
<Field display="accordion" title={$i18n.get({ id: 'styleLayout', dm: '布局' })}>
<Layout {...props} />
</Field>
<Field display="accordion" title={$i18n.get({ id: 'styleText', dm: '文字' })}>
<Typography {...props} />
</Field>
<Field display="accordion" title={$i18n.get({ id: 'styleBackground', dm: '背景' })}>
<Background {...props} />
</Field>
<Field display="accordion" title={$i18n.get({ id: 'styleFrame', dm: '边框' })}>
<Border {...props} />
</Field>
<Field display="accordion" title={$i18n.get({ id: 'styleEffect', dm: '效果' })}>
<Effects {...props} />
</Field>
</div>
);
}
}
StyleSetter.Layout = Layout;
StyleSetter.Typography = Typography;
StyleSetter.Background = Background;
StyleSetter.Effects = Effects;
StyleSetter.Border = Border;
// StyleSetter.Svg = Svg;
export default StyleSetter;

44
packages/editor-setters/src/style-setter/lc-style-setter/layout/display.js
View File

@ -1,44 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import ChoiceControl from '@ali/ve-choice-control';
import Icons from '@ali/ve-icons';
import utils from '../utils';
class Display extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleLayoutDisplaySetter';
render() {
const display = utils.getPropertyValue(this.props, 'display').value;
return (
<ChoiceControl
className="vs-style-layout-diplay"
value={display}
options={[{
title: <Icons name="style.block" size="medium" />,
value: 'block',
}, {
title: <Icons name="style.inline-block" size="medium" />,
value: 'inline-block',
}, {
title: <Icons name="style.inline" size="medium" />,
value: 'inline',
}, {
title: <Icons name="style.flex" size="medium" />,
value: 'flex',
},
// {
// title: <Icons name="hidden" size="medium" />,
// value: 'none',
// }
]}
onChange={val => utils.setPropertyValue(this.props, 'display', val)}
/>
);
}
}
export default Display;

176
packages/editor-setters/src/style-setter/lc-style-setter/layout/flex.js
View File

@ -1,176 +0,0 @@
import React, { Component, PropTypes } from 'react';
import ChoiceControl from '@ali/ve-choice-control';
import Icons from '@ali/ve-icons';
import Field from '@ali/ve-field';
import utils from '../utils';
class Flex extends Component {
static propTypes = {
prop: PropTypes.object,
};
static displayName = 'StyleLayoutFlexSetter';
render() {
// flex-direction
const direction = utils.getPropertyValue(this.props, 'flex-direction').value;
// align-items
const align = utils.getPropertyValue(this.props, 'align-items').value;
// justify-content
const justify = utils.getPropertyValue(this.props, 'justify-content').value;
/*
// flex-warp
const wrap = getPropertyValue(this.props, 'flex-wrap').value;
const isWrap = /^wrap/.test(wrap);
// align-content
const alignColumns = getPropertyValue(this.props, 'align-content').value;
*/
const isVertical = /^column/.test(direction);
const v = isVertical ? '-v' : '';
const reverseClass = /reverse$/.test(direction)
? `vs-style-reverse${isVertical ? '-v' : '-h'}` : null;
return (
<div className="vs-style-layout-flex">
<ChoiceControl
className="vs-style-flex-property"
value={direction}
options={[{
title: <Icons name="style.direction-row" size="medium" />,
tip: 'Direction:row',
value: 'row',
}, {
title: <Icons name="style.direction-column" size="medium" />,
tip: 'Direction:column',
value: 'column',
}, {
title: <Icons name="style.direction-row" className="vs-style-reverse-h" size="medium" />,
tip: 'Direction:row-reverse',
value: 'row-reverse',
}, {
title: (<Icons
name="style.direction-column" className="vs-style-reverse-v" size="medium"
/>),
tip: 'Direction:column-reverse',
value: 'column-reverse',
}]}
onChange={(val) => utils.setPropertyValue(this.props, 'flex-direction', val)}
/>
<ChoiceControl
className="vs-style-flex-property"
value={align}
options={[{
title: (
<Icons
className={reverseClass}
name={`style.align-start${v}`}
size="medium"
/>
),
tip: 'Align:flex-start',
value: 'flex-start',
}, {
title: (
<Icons
className={reverseClass}
name={`style.align-center${v}`}
size="medium"
/>
),
tip: 'Align:center',
value: 'center',
}, {
title: (
<Icons
className={reverseClass}
name={`style.align-end${v}`}
size="medium"
/>
),
tip: 'Align:flex-end',
value: 'flex-end',
}, {
title: (
<Icons
className={reverseClass}
name={`style.align-stretch${v}`}
size="medium"
/>
),
tip: 'Align:stretch',
value: 'stretch',
}, {
title: (
<Icons
className={reverseClass}
name={`style.align-baseline${v}`}
size="medium"
/>
),
tip: 'Align:baseline',
value: 'baseline',
}]}
onChange={(val) => utils.setPropertyValue(this.props, 'align-items', val)}
/>
<ChoiceControl
className="vs-style-flex-property"
value={justify}
options={[{
title: (
<Icons
className={reverseClass}
name={`style.justify-start${v}`}
size="medium"
/>
),
tip: 'Justify:flex-start',
value: 'flex-start',
}, {
title: (
<Icons
className={reverseClass}
name={`style.justify-center${v}`}
size="medium"
/>
),
tip: 'Justify:center',
value: 'center',
}, {
title: (
<Icons
className={reverseClass}
name={`style.justify-end${v}`}
size="medium"
/>
),
tip: 'Justify:flex-end',
value: 'flex-end',
}, {
title: (
<Icons
className={reverseClass}
name={`style.justify-between${v}`}
size="medium"
/>
),
tip: 'Justify:space-between',
value: 'space-between',
}, {
title: (
<Icons
className={reverseClass}
name={`style.justify-around${v}`}
size="medium"
/>
),
tip: 'Justify:space-around',
value: 'space-around',
}]}
onChange={(val) => utils.setPropertyValue(this.props, 'justify-content', val)}
/>
</div>
);
}
}
export default Flex;

10
packages/editor-setters/src/style-setter/lc-style-setter/layout/flexitem.js
View File

@ -1,10 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
class FlexItem extends Component {
render() {
return null;
}
}
export default FlexItem;

19
packages/editor-setters/src/style-setter/lc-style-setter/layout/height.js
View File

@ -1,19 +0,0 @@
import React, { Component, PropTypes } from 'react';
import Size from './size';
import utils from '../utils';
class Height extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleLayoutWidthSetter';
static transducer = utils.transducer;
render() {
return <Size {...this.props} field="height" />;
}
}
export default Height;

107
packages/editor-setters/src/style-setter/lc-style-setter/layout/index.js
View File

@ -1,107 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import Field from '@ali/ve-field';
import Display from './display';
import Flex from './flex';
import FlexItem from './flexitem';
import PaddingMargin from './padding+margin';
import Width from './width';
import Height from './height';
import Position from './position'; // advanced
import utils from '../utils';
import $i18n from '../i18n/index';
function inFlexBox(node) {
const nativeNode = node;
if (!nativeNode) return false;
const { parentNode } = nativeNode;
if (!parentNode) return false;
const display = window.getComputedStyle(parentNode).getPropertyValue('display');
return /flex/.test(display);
}
function isFlexBox(props) {
const display = utils.getPropertyValue(props, 'display').value;
return /flex$/.test(display);
}
class Layout extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleLayoutSetter';
componentWillMount() {
}
// shouldComponentUpdate() {
// return false;
// }
componentWillUnmount() {
}
render() {
const className = classNames('vs-style-layout', this.props.className);
const aFlexBox = isFlexBox(this.props);
const aFlexItem = inFlexBox(this.props.node);
return (
<div className={className}>
<Field
display="inline"
title={$i18n.get({ id: 'styleDisplay', dm: '显示' })}
className="vs-field-display"
compact
highlight={utils.getCurrentPropertyHighlight(this.props, 'display')}
>
<Display {...this.props} />
</Field>
{aFlexBox && (
<Field
display="caption"
className="vs-field-flex"
title={$i18n.get({ id: 'styleFlexibleLayout', dm: '弹性布局' })}
>
<Flex {...this.props} />
</Field>
)}
{/* todo: aFlexItem && <Field display="caption" title="Flex Item">
<FlexItem />
</Field> */}
<Field display="plain">
<PaddingMargin {...this.props} />
</Field>
<Field display="plain" className="vs-flex-field">
<Field
display="inline"
title={$i18n.get({ id: 'styleWidth', dm: '宽' })}
compact
highlight={utils.getCurrentPropertyHighlight(this.props, 'width')}
>
<Width {...this.props} />
</Field>
<Field
display="inline"
title={$i18n.get({ id: 'styleHigh', dm: '高' })}
compact
highlight={utils.getCurrentPropertyHighlight(this.props, 'height')}
>
<Height {...this.props} />
</Field>
</Field>
{/* todo:
{advanced && <Field display="inline" title="Position">
<Position />
</Field>}
*/}
</div>
);
}
}
export default Layout;

504
packages/editor-setters/src/style-setter/lc-style-setter/layout/padding+margin.js
View File

@ -1,504 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import Icons, { Button } from '@ali/ve-icons';
import utils from '../utils';
import $i18n from '../i18n/index';
function diplayValue(value) {
if (utils.isEmptyCssValue(value)) {
return $i18n.get({ id: 'styleAir', dm: '空' });
}
const m = /^(.+)px/.exec(value);
if (m) {
return m[1];
}
return value;
}
class Input extends Component {
componentDidMount() {
if (this.input) {
this.input.select();
}
}
render() {
return (
<input
className="vs-inline-input-input"
type="text"
ref={(ref) => {
this.input = ref;
}}
{...this.props}
/>
);
}
}
class InlineInput extends Component {
static propTypes = {
className: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
inheritValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onChange: PropTypes.func,
negtive: PropTypes.bool,
compute: PropTypes.func,
highlight: PropTypes.bool,
};
static defaultProps = {
compute() {
return '0px';
},
highlight: false,
};
constructor(props) {
super(props);
this.state = {
value: '',
editing: false,
};
this.pattern = this.props.negtive
? /^(-?\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i
: /^(\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i;
}
componentWillReceiveProps(nextProps) {
if (nextProps.value !== this.props.value) {
this.setState({ value: utils.isEmptyCssValue(nextProps.value) ? '' : nextProps.value });
}
}
setValue(value) {
this.setState({ value });
if (this.isValid(value) && this.props.onChange) {
this.props.onChange(value.trim());
}
}
isValid(value) {
return value.trim() === '' || this.pattern.test(value);
}
keyDown(e) {
if (e.keyCode === 27 || e.keyCode === 13) {
this.exitEdit();
e.preventDefault();
return;
}
if (e.keyCode !== 38 && e.keyCode !== 40) {
return;
}
e.preventDefault();
const factor = e.keyCode === 40 ? -1 : 1;
let value = e.target.value.trim();
if (!this.isValid(value)) {
value = utils.isEmptyCssValue(this.props.value) ? this.props.inheritValue : this.props.value;
}
if (utils.isEmptyCssValue(value) || value.toLowerCase() === 'auto') {
value = this.props.compute(value);
}
const m = this.pattern.exec(value);
if (!m[1]) return;
let n = parseFloat(m[1]) + factor;
if (!this.props.negtive && n < 0) {
n = 0;
}
this.setValue(`${n}${m[2] || 'px'}`);
}
exitEdit() {
if (!/\D+$/.test(this.state.value)) {
this.setValue(`${this.state.value}px`);
} else if (!this.pattern.test(this.state.value)) {
this.setValue(`${/\d+/.exec(this.state.value)[0]}px`);
}
this.setState({
editing: false,
});
}
enterEdit() {
this.setState({
editing: true,
value: utils.isEmptyCssValue(this.props.value) ? '' : this.props.value,
});
}
render() {
const { value, inheritValue, highlight } = this.props;
const className = classNames('vs-inline-input', this.props.className, {
've-highlight': highlight,
});
const display = diplayValue(utils.isEmptyCssValue(value) ? inheritValue : value);
return (
<div className={className}>
{!this.state.editing && (
<span className="vs-inline-input-text" onClick={this.enterEdit.bind(this)}>
{display}
</span>
)}
{this.state.editing && (
<Input
value={this.state.value}
placeholder={inheritValue}
onChange={e => this.setValue(e.target.value)}
onKeyDown={this.keyDown.bind(this)}
onBlur={this.exitEdit.bind(this)}
/>
)}
</div>
);
}
}
function spliteMargin(all) {
if (!all) {
return {
top: null,
right: null,
bottom: null,
left: null,
};
}
let [top, right, bottom, left] = all.trim().split(/\s+/); // eslint-disable-line
if (utils.isEmptyCssValue(right)) {
right = top;
}
if (utils.isEmptyCssValue(bottom)) {
bottom = top;
}
if (utils.isEmptyCssValue(left)) {
left = right;
}
return {
top, right, bottom, left,
};
}
function compositeMargin(all, top, right, bottom, left) {
const ret = spliteMargin(all);
if (!utils.isEmptyCssValue(top)) {
ret.top = top;
}
if (!utils.isEmptyCssValue(right)) {
ret.right = right;
}
if (!utils.isEmptyCssValue(bottom)) {
ret.bottom = bottom;
}
if (!utils.isEmptyCssValue(left)) {
ret.left = left;
}
return ret;
}
function isFull(box) {
return (
!utils.isEmptyCssValue(box.top)
&& !utils.isEmptyCssValue(box.right)
&& !utils.isEmptyCssValue(box.bottom)
&& !utils.isEmptyCssValue(box.left)
);
}
class LayoutBox extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
name: PropTypes.string,
negtive: PropTypes.bool,
};
constructor(props) {
super(props);
this.pattern = this.props.negtive
? /^(-?\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i
: /^(\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i;
}
componentDidMount() {
this.shell.addEventListener('mousedown', (e) => {
// todo: dragging & interval add
const t = e.target;
if (t.dataset && t.dataset.handle) {
this.add(t.dataset.handle);
}
});
}
add(dir, factor = 1) {
if (!this.current || !this.inherit) return;
let value = utils.isEmptyCssValue(this.current[dir]) ? this.inherit[dir] : this.current[dir];
if (utils.isEmptyCssValue(value) || value.toLowerCase() === 'auto') {
value = this.compute(dir);
}
const m = this.pattern.exec(value);
if (!m[1]) return;
let n = parseFloat(m[1]) + factor;
if (!this.props.negtive && n < 0) {
n = 0;
}
this.change(this.current, dir, `${n}${m[2] || 'px'}`);
}
change(box, dir, val) {
const { name } = this.props;
box[dir] = val;
if (isFull(box)) {
utils.setPropertyValue(
this.props,
{
[name]: `${box.top} ${box.right} ${box.bottom} ${box.left}`,
[`${name}-top`]: null,
[`${name}-right`]: null,
[`${name}-bottom`]: null,
[`${name}-left`]: null,
},
);
} else {
utils.setPropertyValue(
this.props,
{
[name]: null,
[`${name}-top`]: box.top,
[`${name}-right`]: box.right,
[`${name}-bottom`]: box.bottom,
[`${name}-left`]: box.left,
},
);
}
}
compute(dir) {
const { name, node } = this.props;
// if (external) {
// return getComputePropertyValue(node, `${name}-${dir}`);
// }
return '0px';
}
render() {
const {
name, negtive,
} = this.props;
const all = utils.getPropertyValue(this.props, name);
const top = utils.getPropertyValue(this.props, `${name}-top`);
const right = utils.getPropertyValue(this.props, `${name}-right`);
const bottom = utils.getPropertyValue(this.props, `${name}-bottom`);
const left = utils.getPropertyValue(this.props, `${name}-left`);
const current = compositeMargin(
all.current,
top.current,
right.current,
bottom.current,
left.current,
);
const inherit = compositeMargin(
all.inherit,
top.inherit,
right.inherit,
bottom.inherit,
left.inherit,
);
this.current = current;
this.inherit = inherit;
return (
<div
className={classNames('vs-layout-box', this.props.className)}
ref={(ref) => {
this.shell = ref;
}}
>
<div className="vs-layout-handle vs-handle-top" data-handle="top">
<Icons name="style.handle" className="vs-handle-icon" size="12px" />
</div>
<InlineInput
className="vs-layout-input-top"
value={current.top}
inheritValue={inherit.top}
compute={() => this.compute('top')}
negtive={negtive}
highlight={current.top != undefined}
onChange={val => this.change(current, 'top', val)}
/>
<div className="vs-layout-handle vs-handle-right" data-handle="right">
<Icons name="style.handle" className="vs-handle-icon" size="12px" />
</div>
<InlineInput
className="vs-layout-input-right"
value={current.right}
inheritValue={inherit.right}
negtive={negtive}
highlight={current.right != undefined}
compute={() => this.compute('right')}
onChange={val => this.change(current, 'right', val)}
/>
<div className="vs-layout-handle vs-handle-bottom" data-handle="bottom">
<span className="vs-handle-inscription">{name}</span>
<Icons name="style.handle" className="vs-handle-icon" size="12px" />
</div>
<InlineInput
className="vs-layout-input-bottom"
value={current.bottom}
inheritValue={inherit.bottom}
negtive={negtive}
highlight={current.bottom != undefined}
compute={() => this.compute('bottom')}
onChange={val => this.change(current, 'bottom', val)}
/>
<div className="vs-layout-handle vs-handle-left" data-handle="left">
<Icons name="style.handle" className="vs-handle-icon" size="12px" />
</div>
<InlineInput
className="vs-layout-input-left"
value={current.left}
inheritValue={inherit.left}
negtive={negtive}
highlight={current.left != undefined}
compute={() => this.compute('left')}
onChange={val => this.change(current, 'left', val)}
/>
</div>
);
}
}
class MarginAuto extends Component {
static propTypes = {
prop: PropTypes.object,
};
setAuto(box) {
box.left = 'auto';
box.right = 'auto';
if (isFull(box)) {
utils.setPropertyValue(
this.props,
{
margin: `${box.top} ${box.right} ${box.bottom} ${box.left}`,
'margin-top': null,
'margin-right': null,
'margin-bottom': null,
'margin-left': null,
},
);
} else {
utils.setPropertyValue(
this.props,
{
margin: null,
'margin-top': box.top,
'margin-right': box.right,
'margin-bottom': box.bottom,
'margin-left': box.left,
},
);
}
}
render() {
const all = utils.getPropertyValue(this.props, 'margin');
const top = utils.getPropertyValue(this.props, 'margin-top');
const bottom = utils.getPropertyValue(this.props, 'margin-bottom');
const right = utils.getPropertyValue(this.props, 'margin-right');
const left = utils.getPropertyValue(this.props, 'margin-left');
const current = compositeMargin(
all.current,
top.current,
right.current,
bottom.current,
left.current,
);
const inherit = compositeMargin(
all.inherit,
top.inherit,
right.inherit,
bottom.inherit,
left.inherit,
);
const eright = utils.isEmptyCssValue(current.right) ? inherit.right : current.right;
const eleft = utils.isEmptyCssValue(current.left) ? inherit.left : current.left;
const className = classNames('vs-margin-auto', {
've-active': eright === 'auto' && eleft === 'auto',
});
return (
<Button
className={className}
name="style.auto"
size="medium"
onClick={() => this.setAuto(current)}
/>
);
}
}
class PaddingMargin extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static transducer = utils.transducer;
componentWillMount() {
}
componentWillUnmount() {
}
render() {
const className = classNames('vs-style-layout-padding-margin', this.props.className);
return (
<div className={className}>
<LayoutBox
className="vs-margin-box"
name="margin"
negtive
{...this.props}
/>
<LayoutBox className="vs-padding-box" name="padding" {...this.props} />
<MarginAuto {...this.props} />
</div>
);
}
}
export default PaddingMargin;

10
packages/editor-setters/src/style-setter/lc-style-setter/layout/position.js
View File

@ -1,10 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
class Position extends Component {
render() {
return null;
}
}
export default Position;

82
packages/editor-setters/src/style-setter/lc-style-setter/layout/size.js
View File

@ -1,82 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import NumberControl from '@ali/ve-number-control';
import utils from '../utils';
function getRectSize(node, field) {
const nativeNode = node;
if (!nativeNode) return 0;
return nativeNode.getBoundingClientRect()[field];
}
function getPercent(node, field) {
const nativeNode = node;
if (!nativeNode) return 100;
const parentNode = nativeNode.parentNode;
if (!parentNode) return 100;
const s = nativeNode.getBoundingClientRect()[field];
const p = parentNode.getBoundingClientRect()[field];
return (s / p * 100).toFixed(0);
}
class Size extends Component {
static propTypes = {
prop: PropTypes.object,
field: PropTypes.string,
className: PropTypes.string,
};
static displayName = 'StyleLayoutSizeSetter';
componentWillMount() {
}
componentWillUnmount() {
}
render() {
const className = classNames('vs-style-layout-size', this.props.className);
const { field, node } = this.props;
const { current, inherit } = utils.getPropertyValue(this.props, field);
return (
<NumberControl
className={className}
placeholder={inherit}
value={current}
onChange={(val) => utils.setPropertyValue(this.props, field, val)}
min={0}
compute={() => `${getRectSize(node, field)}px`}
units={[{
type: 'px',
cast(v, validNumber) {
if (v === 'auto') {
v = getRectSize(node, field);
} else if (!validNumber) {
v = '0';
}
return `${v}px`;
},
list: true,
}, {
type: '%',
list: true,
cast(v, validNumber) {
if (v === 'auto') {
return '100%';
}
v = getPercent(node, field) || '100';
return `${v}%`;
},
}, {
type: 'auto',
preset: true,
list: true,
}, 'em', 'rem', 'pt', 'ex', 'ch', 'vh', 'vw', 'vmin', 'vmax', 'mm', 'q', 'cm', 'in', 'pc']}
/>
);
}
}
export default Size;

20
packages/editor-setters/src/style-setter/lc-style-setter/layout/width.js
View File

@ -1,20 +0,0 @@
import React, { Component, PropTypes } from 'react';
import Size from './size';
import utils from '../utils';
class Width extends Component {
static propTypes = {
prop: PropTypes.object,
className: PropTypes.string,
};
static displayName = 'StyleLayoutWidthSetter';
static transducer = utils.transducer;
render() {
return <Size {...this.props} field="width" />;
}
}
export default Width;

633
packages/editor-setters/src/style-setter/lc-style-setter/style.less
View File

@ -1,633 +0,0 @@
@import "~@ali/ve-less-variables/index.less";
@layout-handle-color: rgba(0, 0, 0, .3);
// todo remove
:root {
--color-brand: #006cff;
--color-brand-light: #197aff;
--color-brand-dark: #0060e5;
--color-canvas-background: rgba(31, 56, 88, 0.06);
--color-icon-normal: rgba(31, 56, 88, 0.4);
--color-icon-hover: rgba(31, 56, 88, 0.6);
--color-icon-active: #006cff;
--color-icon-reverse: #ffffff;
--color-line-normal: rgba(31, 56, 88, 0.1);
--color-line-darken: rgba(18, 32, 50, 0.1);
--color-title: rgba(0, 0, 0, 0.8);
--color-text: rgba(0, 0, 0, 0.6);
--color-text-dark: rgba(0, 0, 0, 0.6);
--color-text-light: rgba(26, 26, 26, 0.6);
--color-text-reverse: rgba(255, 255, 255, 0.8);
--color-text-regular: rgba(31, 56, 88, 0.8);
--color-field-label: rgba(0, 0, 0, 0.4);
--color-field-text: rgba(0, 0, 0, 0.6);
--color-field-placeholder: rgba(31, 56, 88, 0.3);
--color-field-border: rgba(31, 56, 88, 0.3);
--color-field-border-hover: rgba(31, 56, 88, 0.4);
--color-field-border-active: rgba(31, 56, 88, 0.6);
--color-field-background: #ffffff;
--color-function-success: #66bc5c;
--color-function-success-dark: #4da243;
--color-function-success-light: #88cb80;
--color-function-warning: #fabd0e;
--color-function-warning-dark: #d19c04;
--color-function-warning-light: #fbcb40;
--color-function-information: #2E76A6;
--color-function-information-dark: #235a7e;
--color-function-information-light: #3e91c9;
--color-function-error: #f04631;
--color-function-error-dark: #de2710;
--color-function-error-light: #f37161;
--color-pane-background: #ffffff;
--color-block-background-normal: #ffffff;
--color-block-background-light: rgba(31, 56, 88, 0.04);
--color-block-background-shallow: rgba(31, 56, 88, 0.06);
--color-block-background-dark: rgba(31, 56, 88, 0.1);
--color-block-background-disabled: rgba(31, 56, 88, 0.2);
--color-block-background-deep-dark: #BAC3CC;
--color-layer-mask-background: rgba(0, 0, 0, 0.1);
--color-layer-tooltip-background: rgba(44, 47, 51, 0.8);
}
.gradient-dark-mixin() {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
}
.gradient-white-mixin() {
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}
.border-dark-mixin() {
border: 1px solid rgba(0, 0, 0, 0.1);
}
.vs-style {
.vs-style-source {
box-sizing: border-box;
min-width: 80px;
width: auto;
height: 26px;
padding: 0 10px;
border: none;
border-radius: 3px;
background-color: var(--color-brand, @brand-color-1);
color: var(--color-text-reverse, @white-alpha-2);
font-size: 12px;
outline: 0;
&:hover {
background-color: var(--color-brand-dark, @brand-color-1-3);
cursor: pointer;
}
margin-bottom: 5px;
}
.vs-flex-reverse {
transform: scaleX(-1);
}
.vs-flex-reverse-v {
transform: scaleY(-1);
}
}
.vs-style-reverse-h {
transform-origin: center;
transform: scaleX(-1);
}
.vs-style-reverse-v {
transform-origin: center;
transform: scaleY(-1);
}
.vs-style-reverse-v-h {
transform-origin: center;
transform: scale(-1, -1);
}
.vs-style-rotate-180 {
transform-origin: center;
transform: rotate(180deg);
}
.vs-style-rotate-180-r {
transform-origin: center;
transform: rotate(-180deg);
}
.vs-style-rotate-90 {
transform-origin: center;
transform: rotate(90deg);
}
.vs-style-rotate-90-r {
transform-origin: center;
transform: rotate(-90deg);
}
.vs-style-rotate-45 {
transform-origin: center;
transform: rotate(45deg);
}
.vs-style-rotate-45-r {
transform-origin: center;
transform: rotate(-45deg);
}
.ve-field.vs-flex-field {
display: flex;
>.ve-field {
flex: 1;
padding: 5px;
&.ve-inline-field .ve-field-title {
width: 20px;
letter-spacing: 0;
margin-right: 3px;
word-break: normal;
}
}
}
.ve-field-title svg>* {
fill: var(--color-icon-normal, @normal-alpha-4);
}
.vs-style-layout {
>.vs-field-display {
>.ve-field-head>.ve-field-title {
width: auto;
margin-right: 3px;
word-break: normal;
}
}
.vs-style-diplay {}
.vs-style-layout-flex {
margin: 8px 5px 5px;
>.vs-style-flex-property {
&:not(:first-child) {
margin-top: 5px;
}
>.ve-option {
flex: 1;
}
}
}
.vs-style-layout-padding-margin {
// width: 190px;
height: 107px;
margin: 25px 32px;
position: relative;
.vs-layout-box {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
.vs-inline-input {
position: absolute;
width: 36px;
height: 16px;
>.vs-inline-input-text {
display: block;
font-family: @font-family;
color: @text-color;
font-size: 12px;
line-height: 16px;
opacity: 0.6;
cursor: text;
&:hover {
opacity: 1;
text-decoration: underline;
}
}
>.vs-inline-input-input {
font-family: @font-family;
color: @text-color;
font-size: 12px;
border: none;
background: rgba(0, 0, 0, 0.5);
border-radius: 3px;
width: 100%;
height: 16px;
line-height: 16px;
padding: 0 2px;
box-sizing: border-box;
outline: none;
}
&.vs-layout-input-top,
&.vs-layout-input-bottom {
left: 50%;
margin-left: -18px;
text-align: center;
.vs-inline-input-input {
text-align: center;
}
}
&.vs-layout-input-left,
&.vs-layout-input-right {
top: 50%;
margin-top: -8px;
}
&.vs-layout-input-top {
top: -17px;
}
&.vs-layout-input-bottom {
bottom: -17px;
}
&.vs-layout-input-left {
left: -38px;
text-align: right;
.vs-inline-input-input {
text-align: right;
}
}
&.vs-layout-input-right {
right: -38px;
}
}
.vs-layout-handle {
position: absolute;
display: block;
font-size: 0;
border: solid 14px transparent;
box-sizing: border-box;
opacity: 0.8;
.vs-handle-icon {
position: absolute;
opacity: 0.6;
max-width: none;
max-height: none;
pointer-events: none;
}
&.vs-handle-top {
top: 0;
border-top-color: @layout-handle-color;
border-bottom-width: 0;
.vs-handle-icon {
bottom: 1px;
left: 50%;
transform: translateX(-50%);
}
}
&.vs-handle-right {
right: 0;
border-right-color: @layout-handle-color;
border-left-width: 0;
.vs-handle-icon {
left: 1px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
}
}
&.vs-handle-bottom {
bottom: 0;
border-bottom-color: @layout-handle-color;
border-top-width: 0;
.vs-handle-icon {
top: 1px;
left: 50%;
transform: translateX(-50%) rotate(180deg);
}
.vs-handle-inscription {
position: absolute;
left: 3px;
top: 1px;
font-size: 12px;
text-transform: uppercase;
transform-origin: left;
transform: scale(0.6);
pointer-events: none;
}
}
&.vs-handle-left {
left: 0;
border-left-color: @layout-handle-color;
border-right-width: 0;
.vs-handle-icon {
right: 1px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
}
}
&.vs-handle-top,
&.vs-handle-bottom {
height: 0;
left: 2px;
right: 2px;
cursor: row-resize;
}
&.vs-handle-left,
&.vs-handle-right {
width: 0;
bottom: 2px;
top: 2px;
cursor: col-resize;
}
&:hover {
opacity: 1;
}
}
&.vs-padding-box {
top: 18px;
bottom: 18px;
left: 18px;
right: 18px;
.vs-handle-icon>path {
transform-origin: center;
transform: rotate(180deg);
}
.vs-inline-input {
&.vs-layout-input-top {
top: 16px;
}
&.vs-layout-input-bottom {
bottom: 16px;
}
&.vs-layout-input-left {
left: 16px;
text-align: left;
.vs-inline-input-input {
text-align: left;
}
}
&.vs-layout-input-right {
right: 16px;
text-align: right;
.vs-inline-input-input {
text-align: right;
}
}
}
}
}
.vs-margin-auto {
position: absolute;
bottom: 0;
right: -35px;
cursor: pointer;
padding: 2px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.3);
&.ve-active {
background: rgba(0, 0, 0, 0.4);
}
}
.ve-highlight {
.vs-inline-input-text {
font-weight: bold;
color: var(--color-brand, '#006cff') !important;
}
}
}
}
.vs-style-typography {
.ve-field.ve-inline-field {
width: 100%;
padding: 3px;
>.ve-field-head .ve-field-title {
width: 20px;
margin-right: 3px;
justify-content: flex-end;
}
}
.ve-choice-control.ve-compact .ve-option {
padding: 1px;
}
.vs-style-font-family {
width: 100%;
}
.vs-style-font-weight {
width: 143px;
}
.vs-style-font-color {
width: 100%;
}
.vs-style-text-align {
width: 100%;
}
}
.vs-style-background {
.ve-field.ve-inline-field {
width: 100%;
padding: 3px;
>.ve-field-head .ve-field-title {
width: 20px;
margin-right: 3px;
justify-content: flex-end;
}
}
.ve-choice-control.ve-compact .ve-option {
padding: 1px;
}
.vs-style-background-color {
width: 100%;
}
.vs-style-background-repeat {
width: 126px;
}
.vs-style-background-image {
width: 100%;
}
.vs-style-background-position {
display: flex;
align-items: center;
.vs-style-position-preset {
width: 70px;
height: 70px;
position: relative;
.vs-preset-item {
.gradient-white-mixin;
position: absolute;
height: 20px;
width: 20px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
border-radius: 1px;
transition: background 0.2s;
opacity: 0.8;
display: flex;
align-items: center;
justify-content: center;
&:hover {
cursor: pointer;
opacity: 1;
}
&.ve-active {
.gradient-dark-mixin;
opacity: 1;
box-shadow: none;
}
&.vs-preset-left-top {
left: 0;
top: 0;
>.ve-svgicon {
transform: rotate(-45deg);
}
}
&.vs-preset-center-top {
left: 50%;
margin-left: -10px;
top: 0;
}
&.vs-preset-right-top {
right: 0;
top: 0;
>.ve-svgicon {
transform: rotate(45deg);
}
}
&.vs-preset-left-center {
left: 0;
top: 50%;
margin-top: -10px;
>.ve-svgicon {
transform: rotate(-90deg);
}
}
&.vs-preset-center {
left: 50%;
margin-left: -10px;
top: 50%;
margin-top: -10px;
}
&.vs-preset-right-center {
right: 0;
top: 50%;
margin-top: -10px;
>.ve-svgicon {
transform: rotate(90deg);
}
}
&.vs-preset-left-bottom {
left: 0;
bottom: 0;
>.ve-svgicon {
transform: rotate(-135deg);
}
}
&.vs-preset-center-bottom {
left: 50%;
margin-left: -10px;
bottom: 0;
>.ve-svgicon {
transform: scaleY(-1);
}
}
&.vs-preset-right-bottom {
right: 0;
bottom: 0;
>.ve-svgicon {
transform: rotate(135deg);
}
}
}
}
.vs-style-position-custom {
flex: 1;
margin-left: 10px;
}
}
.vs-style-background-size {
display: flex;
align-items: center;
.vs-style-bgsize-preset {}
.vs-style-bgsize-custom {
flex: 1;
}
}
}
.vs-style-effects {
.ve-field.ve-inline-field {
width: 100%;
padding: 3px;
>.ve-field-head .ve-field-title {
width: 20px;
margin-right: 3px;
justify-content: flex-end;
}
}
.ve-number-control.vs-style-opacity.ve-has-units {
width: 100%;
}
.ve-select-control.vs-style-cursor {
width: 100%;
path {
fill: var(--color-text, @normal-alpha-4);
}
}
}
.vs-style-pseudo-container {
display: flex;
justify-content: space-between;
align-items: center;
.vs-style-source {
margin-top: 6px;
}
.vs-style-pseudo {
display: flex;
justify-content: space-between;
align-items: center;
.vs-style-pseudo-select-control {
width: 105px;
}
span {
margin-right: 5px;
}
}
}
.control-button-mixin() {
margin: 2px;
padding: 5px;
border-radius: 2px;
text-align: center;
cursor: pointer;
}
.vs-style-border-style,
.vs-style-border-radius {
display: flex;
margin-top: 5px;
.border-dark-mixin;
.vs-style-border-setter-left-pane,
.vs-style-border-setter-right-pane {
display: flex;
}
.vs-style-border-setter-right-pane {
flex-direction: column;
align-items: center;
justify-content: center;
.ve-number-control,
.ve-color-control,
.ve-select-control {
width: 80px;
margin-right: 4px;
}
>div {
display: flex;
align-items: center;
}
}
.vs-style-border-setter-left-pane {
width: 40%;
align-items: center;
justify-content: space-around;
}
.vs-style-border-setter-row {
>div {
.gradient-white-mixin;
.control-button-mixin;
}
.vs-style-border-selected {
.gradient-dark-mixin;
}
}
}
.ve-style-box-shadow-select {
display: flex;
.ve-color-control {
width: 100%;
}
}

0
packages/editor-setters/src/style-setter/lc-style-setter/svg/fill.js
View File

10
packages/editor-setters/src/style-setter/lc-style-setter/svg/index.js
View File

@ -1,10 +0,0 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
class Svg extends Component {
render() {
return null;
}
}
export default Svg;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline-v.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignBaselineV(props) {
return (
<IconBase viewBox="0 0 24 17" {...props}>
<g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"/><path d="M2 9h9v5H2V9zm1 1h2v3H3v-3z"/><path opacity=".4" d="M5 4h5v3H5z"/><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"/></g>
</IconBase>
);
}
AlignBaselineV.displayName = 'AlignBaselineV';
module.exports = AlignBaselineV;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignBaseline(props) {
return (
<IconBase viewBox="0 0 21 11" {...props}>
<g fillRule="evenodd"><path d="M0 5h21v1H0V5zm4.5 0h6v1h-6V5zm6 0h6v1h-6V5z" opacity=".5"/><path d="M11 1h5v9h-5V1zm1 1h3v3h-3V2z"/><path opacity=".4" d="M6 5h3v5H6z"/><path d="M6 3v7h3V3H6zM5 2h5v9H5V2z"/></g>
</IconBase>
);
}
AlignBaseline.displayName = 'AlignBaseline';
module.exports = AlignBaseline;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center-v.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignCenterV(props) {
return (
<IconBase viewBox="0 0 9 17" {...props}>
<g fillRule="evenodd"><path d="M4 0h1v17H4V0zm0 8.5h1v6H4v-6zm0-6h1v6H4v-6z" opacity=".5"/><path d="M0 9h9v5H0z"/><path opacity=".4" d="M1 4h7v3H1z"/><path d="M1 4v3h7V4H1zM0 3h9v5H0V3z"/></g>
</IconBase>
);
}
AlignCenterV.displayName = 'AlignCenterV';
module.exports = AlignCenterV;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignCenter(props) {
return (
<IconBase viewBox="0 0 21 9" {...props}>
<g fillRule="evenodd"><path d="M0 4h21v1H0V4zm4.5 0h6v1h-6V4zm6 0h6v1h-6V4z" opacity=".5"/><path d="M11 0h5v9h-5z"/><path opacity=".4" d="M6 1h3v7H6z"/><path d="M6 1v7h3V1H6zM5 0h5v9H5V0z"/></g>
</IconBase>
);
}
AlignCenter.displayName = 'AlignCenter';
module.exports = AlignCenter;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end-v.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignEndV(props) {
return (
<IconBase viewBox="0 0 24 17" {...props}>
<g fillRule="evenodd"><path opacity=".5" d="M23 0h1v17h-1z"/><path d="M13 9h9v5h-9z"/><path opacity=".4" d="M14 4h7v3h-7z"/><path d="M14 4v3h7V4h-7zm-1-1h9v5h-9V3z"/></g>
</IconBase>
);
}
AlignEndV.displayName = 'AlignEndV';
module.exports = AlignEndV;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignEnd(props) {
return (
<IconBase viewBox="0 0 21 18" {...props}>
<g fillRule="evenodd"><path opacity=".5" d="M0 17h21v1H0z"/><path d="M11 7h5v9h-5z"/><path opacity=".4" d="M6 8h3v7H6z"/><path d="M6 8v7h3V8H6zM5 7h5v9H5V7z"/></g>
</IconBase>
);
}
AlignEnd.displayName = 'AlignEnd';
module.exports = AlignEnd;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start-v.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignStartV(props) {
return (
<IconBase viewBox="0 0 24 17" {...props}>
<g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"/><path d="M2 9h9v5H2z"/><path opacity=".4" d="M3 4h7v3H3z"/><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"/></g>
</IconBase>
);
}
AlignStartV.displayName = 'AlignStartV';
module.exports = AlignStartV;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignStart(props) {
return (
<IconBase viewBox="0 0 21 18" {...props}>
<g fillRule="evenodd"><path opacity=".5" d="M0 0h21v1H0z"/><path d="M11 2h5v9h-5z"/><path opacity=".4" d="M6 3h3v7H6z"/><path d="M6 3v7h3V3H6zM5 2h5v9H5V2z"/></g>
</IconBase>
);
}
AlignStart.displayName = 'AlignStart';
module.exports = AlignStart;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch-v.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignStretchV(props) {
return (
<IconBase viewBox="0 0 24 17" {...props}>
<g fillRule="evenodd"><path opacity=".5" d="M23 0h1v17h-1zM0 0h1v17H0z"/><path d="M2 9h20v5H2z"/><path opacity=".4" d="M3 4h18v3H3z"/><path d="M3 4v3h18V4H3zM2 3h20v5H2V3z"/></g>
</IconBase>
);
}
AlignStretchV.displayName = 'AlignStretchV';
module.exports = AlignStretchV;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function AlignStretch(props) {
return (
<IconBase viewBox="0 0 21 18" {...props}>
<g fillRule="evenodd"><path opacity=".5" d="M0 17h21v1H0zM0 0h21v1H0z"/><path d="M11 2h5v14h-5z"/><path opacity=".4" d="M6 3h3v12H6z"/><path d="M6 3v12h3V3H6zM5 2h5v14H5V2z"/></g>
</IconBase>
);
}
AlignStretch.displayName = 'AlignStretch';
module.exports = AlignStretch;

17
packages/editor-setters/src/style-setter/lc-style-setter/svglib/auto.js
View File

@ -1,17 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Auto(props) {
return (
<IconBase viewBox="0 0 1024 1024" {...props}>
<path d="M486.4 102.4l51.2 0 0 409.6-51.2 0 0-409.6Z"/>
<path d="M486.4 819.2l51.2 0 0 102.4-51.2 0 0-102.4Z"/>
<path d="M307.2 204.8l409.6 0 0 256-409.6 0 0-256Z"/>
<path d="M768 563.2l0 204.8L256 768l0-204.8L768 563.2M819.2 512 204.8 512l0 307.2 614.4 0L819.2 512 819.2 512z"/>
</IconBase>
);
}
Auto.displayName = 'Auto';
module.exports = Auto;

16
packages/editor-setters/src/style-setter/lc-style-setter/svglib/block.js
View File

@ -1,16 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Block(props) {
return (
<IconBase viewBox="0 0 22 14" {...props}>
<path opacity=".15" d="M19 3v8H3V3h16m1-1H2v10h18V2z"/>
<path d="M19.8 1H2.2A1.2 1.2 0 0 0 1 2.2v9.6A1.2 1.2 0 0 0 2.2 13h17.6a1.2 1.2 0 0 0 1.2-1.2V2.2A1.2 1.2 0 0 0 19.8 1zm.2 11H2V2h18v10z"/>
<path opacity=".35" d="M3 3h16v8H3z"/>
</IconBase>
);
}
Block.displayName = 'Block';
module.exports = Block;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/blur.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Blur(props) {
return (
<IconBase viewBox="0 0 1024 1024" {...props}>
<path d="M598.016 361.984q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM598.016 534.016q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM425.984 726.016q18.005333 0 31.018667 11.989333t13.013333 29.994667-13.013333 29.994667-31.018667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM425.984 361.984q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM598.016 873.984q20.010667 0 20.010667 22.016t-20.010667 22.016q-22.016 0-22.016-22.016t22.016-22.016zM598.016 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-31.018667-11.989333-13.013333-29.994667 13.013333-29.994667 31.018667-11.989333zM896 576q22.016 0 22.016 22.016 0 20.010667-22.016 20.010667t-22.016-20.010667q0-22.016 22.016-22.016zM768 214.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM768 384q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 31.018667-29.994667 13.013333-29.994667-13.013333-11.989333-31.018667 11.989333-29.994667 29.994667-11.989333zM768 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM768 553.984q18.005333 0 29.994667 13.013333t11.989333 31.018667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-31.018667 29.994667-13.013333zM425.984 534.016q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM425.984 297.984q-18.005333 0-29.994667-11.989333t-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333 31.018667 11.989333 13.013333 29.994667-13.013333 29.994667-31.018667 11.989333zM425.984 150.016q-20.010667 0-20.010667-22.016t20.010667-22.016q22.016 0 22.016 22.016t-22.016 22.016zM425.984 873.984q22.016 0 22.016 22.016t-22.016 22.016q-20.010667 0-20.010667-22.016t20.010667-22.016zM128 576q22.016 0 22.016 22.016 0 20.010667-22.016 20.010667t-22.016-20.010667q0-22.016 22.016-22.016zM598.016 150.016q-22.016 0-22.016-22.016t22.016-22.016q20.010667 0 20.010667 22.016t-20.010667 22.016zM598.016 297.984q-18.005333 0-31.018667-11.989333t-13.013333-29.994667 13.013333-29.994667 31.018667-11.989333 29.994667 11.989333 11.989333 29.994667-11.989333 29.994667-29.994667 11.989333zM896 448q-22.016 0-22.016-22.016 0-20.010667 22.016-20.010667t22.016 20.010667q0 22.016-22.016 22.016zM256 214.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM128 406.016q22.016 0 22.016 20.010667 0 22.016-22.016 22.016t-22.016-22.016q0-20.010667 22.016-20.010667zM256 384q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 31.018667-29.994667 13.013333-29.994667-13.013333-11.989333-31.018667 11.989333-29.994667 29.994667-11.989333zM256 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM256 553.984q18.005333 0 29.994667 13.013333t11.989333 31.018667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-31.018667 29.994667-13.013333z"/>
</IconBase>
);
}
Blur.displayName = 'Blur';
module.exports = Blur;

23
packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-all.js
View File

@ -1,23 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function BorderAll(props) {
return (
<IconBase viewBox="0 0 20 20" {...props}>
<g id="Page-1" stroke="none" stroke-width="1" fillRule="evenodd">
<g transform="translate(-40.000000, -40.000000)">
<g transform="translate(40.000000, 40.000000)">
<g transform="translate(10.000000, 10.000000) rotate(270.000000) translate(-10.000000, -10.000000) ">
<rect x="4" y="4" width="12" height="12"/>
<path d="M0,-1.77635684e-15 L20,-1.77635684e-15 L20,20 L0,20 L0,-1.77635684e-15 Z M4,4 L16,4 L16,16 L4,16 L4,4 Z"/>
</g>
</g>
</g>
</g>
</IconBase>
);
}
BorderAll.displayName = 'BorderAll';
module.exports = BorderAll;

24
packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-bottom.js
View File

@ -1,24 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function BorderBottom(props) {
return (
<IconBase viewBox="0 0 20 20" {...props}>
<g stroke="none" stroke-width="1" fillRule="evenodd">
<g transform="translate(-40.000000, -40.000000)">
<rect x="30" y="30" width="40" height="40"/>
<g transform="translate(40.000000, 40.000000)">
<g transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) ">
<rect x="0" y="0" width="20" height="4"/>
<rect x="0" y="4" width="20" height="16"/>
</g>
</g>
</g>
</g>
</IconBase>
);
}
BorderBottom.displayName = 'BorderBottom';
module.exports = BorderBottom;

24
packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-left.js
View File

@ -1,24 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function BorderLeft(props) {
return (
<IconBase viewBox="0 0 20 20" {...props}>
<g stroke="none" stroke-width="1" fillRule="evenodd">
<g transform="translate(-40.000000, -40.000000)">
<rect x="30" y="30" width="40" height="40"/>
<g transform="translate(40.000000, 40.000000)">
<g transform="translate(10.000000, 10.000000) rotate(270.000000) translate(-10.000000, -10.000000) ">
<rect x="0" y="-1.77635684e-15" width="20" height="4"/>
<rect x="0" y="4" width="20" height="16"/>
</g>
</g>
</g>
</g>
</IconBase>
);
}
BorderLeft.displayName = 'BorderLeft';
module.exports = BorderLeft;

24
packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-right.js
View File

@ -1,24 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function BorderRight(props) {
return (
<IconBase viewBox="0 0 20 20" {...props}>
<g stroke="none" stroke-width="1" fillRule="evenodd">
<g transform="translate(-40.000000, -40.000000)">
<rect x="30" y="30" width="40" height="40"/>
<g transform="translate(40.000000, 40.000000)">
<g transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000) ">
<rect x="0" y="0" width="20" height="4"/>
<rect x="0" y="4" width="20" height="16"/>
</g>
</g>
</g>
</g>
</IconBase>
);
}
BorderRight.displayName = 'BorderRight';
module.exports = BorderRight;

23
packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-top.js
View File

@ -1,23 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function BorderTop(props) {
return (
<IconBase viewBox="0 0 20 20" {...props}>
<g stroke="none" stroke-width="1" fillRule="evenodd">
<g transform="translate(-40.000000, -40.000000)">
<g transform="translate(40.000000, 40.000000)">
<g>
<rect x="0" y="0" width="20" height="4"/>
<rect x="0" y="4" width="20" height="16"/>
</g>
</g>
</g>
</g>
</IconBase>
);
}
BorderTop.displayName = 'BorderTop';
module.exports = BorderTop;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/capitalize.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Capitalize(props) {
return (
<IconBase viewBox="0 0 24 17" {...props}>
<path d="M14,4.34122179 L12.1548732,4.40671436 C12.1050287,3.43159789 12.246107,3.14728377 12.0280374,2.76160338 C11.8099678,2.37592298 11.5451729,2.10667844 11.2336449,1.95386168 C10.9221168,1.80104492 10.5545193,1.72463768 10.1308411,1.72463768 L8.44859813,1.72463768 L8.44859813,14.7295909 C8.44859813,15.3990739 9.00934019,15.7338103 10.1308411,15.7338103 L10.1308411,17 L3.90654206,17 L3.90654206,15.7338103 C5.01558187,15.7338103 5.57009346,15.3990739 5.57009346,14.7295909 L5.57009346,1.72463768 L3.86915888,1.72463768 C3.44548075,1.72463768 3.07788318,1.80104492 2.76635514,1.95386168 C2.4548271,2.10667844 2.19003224,2.37592298 1.97196262,2.76160338 C1.75389299,3.14728377 1.89497132,3.43159789 1.84512684,4.40671436 L0,4.34122179 L0,0 L14,0 L14,4.34122179 Z M20.6470588,3.95798319 L24,3.95798319 L23.8739496,5.77310924 C23.403359,5.6722684 22.903364,5.60084055 22.3739496,5.55882353 C21.8445352,5.51680651 21.2689107,5.49579832 20.6470588,5.49579832 L20.6470588,14.2941176 C20.6470588,15.0504239 21.016803,15.4285714 21.7563025,15.4285714 C22.1428591,15.4285714 22.4075623,15.3235305 22.5504202,15.1134454 C22.693278,14.9033603 22.7647059,14.6302538 22.7647059,14.2941176 L22.7647059,12.8319328 L24,12.8319328 L24,13.9411765 C24,14.3949603 23.953782,14.8067208 23.8613445,15.1764706 C23.7689071,15.5462203 23.6008416,15.8613432 23.3571429,16.1218487 C23.1134442,16.3823542 22.789918,16.5882345 22.3865546,16.7394958 C21.9831913,16.8907571 21.4705913,16.9663866 20.8487395,16.9663866 C19.5378086,16.9663866 18.6008432,16.6722718 18.0378151,16.0840336 C17.4747871,15.4957954 17.1932773,14.6722742 17.1932773,13.6134454 L17.1932773,5.49579832 L15,5.49579832 L15,4.28571429 C15.4705906,4.25210067 15.9117626,4.18487445 16.3235294,4.08403361 C16.7352962,3.98319277 17.0966371,3.80672395 17.407563,3.55462185 C17.7184889,3.30251975 17.962184,2.9495821 18.1386555,2.49579832 C18.3151269,2.04201454 18.4033613,1.45378513 18.4033613,0.731092437 L18.4033613,0.176470588 L20.6470588,0 L20.6470588,3.95798319 Z"/>
</IconBase>
);
}
Capitalize.displayName = 'Capitalize';
module.exports = Capitalize;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/center.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Center(props) {
return (
<IconBase viewBox="0 0 1024 1024" {...props}>
<path d="M0 472.615385h393.846154v78.76923H0zM630.153846 472.615385h393.846154v78.76923H630.153846zM472.615385 0h78.76923v393.846154h-78.76923zM472.615385 630.153846h78.76923v393.846154h-78.76923z"/>
</IconBase>
);
}
Center.displayName = 'Center';
module.exports = Center;

15
packages/editor-setters/src/style-setter/lc-style-setter/svglib/color.js
View File

@ -1,15 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Color(props) {
return (
<IconBase viewBox="0 0 21 17" {...props}>
<path d="M7.057923,6.94048365 C7.04979017,6.90724028 7.03471462,6.87699953 7.01408497,6.85190615 L4.23205608,1.83580276 L3.7688805,1 L3.30530819,1.83558828 L0.506021801,6.88386268 C0.49907913,6.8965166 0.493524987,6.90938501 0.489161015,6.92289683 C0.169202902,7.53478935 0,8.2260371 0,8.92500579 C0,11.1720434 1.69064045,13 3.76907885,13 C5.84712054,13 7.53795938,11.1720434 7.53795938,8.92500579 C7.53795938,8.23268578 7.37212861,7.54808671 7.057923,6.94048365 L7.057923,6.94048365 Z"/>
<path d="M14.296,10.288 L8.944,10.288 L7.408,14.152 C7.3279996,14.344001 7.288,14.5039994 7.288,14.632 C7.288,14.9680017 7.77599512,15.2079993 8.752,15.352 C8.86400056,15.3680001 8.9399998,15.4119996 8.98,15.484 C9.0200002,15.5560004 9.04,15.6399995 9.04,15.736 C9.04,15.8320005 9.02400016,15.9599992 8.992,16.12 C8.55999784,16.0879998 8.1040024,16.0600001 7.624,16.036 C7.1439976,16.0119999 6.67200232,16 6.208,16 C5.8879984,16 5.56000168,16.0079999 5.224,16.024 C4.88799832,16.0400001 4.53600184,16.0719998 4.168,16.12 C4.13599984,15.9919994 4.12,15.8640006 4.12,15.736 C4.12,15.6239994 4.1399998,15.5280004 4.18,15.448 C4.2200002,15.3679996 4.30399936,15.3200001 4.432,15.304 C4.92800248,15.2239996 5.29999876,15.1240006 5.548,15.004 C5.79600124,14.8839994 5.97599944,14.6960013 6.088,14.44 L11.872,0.52 C11.9840006,0.24799864 12.135999,0.112 12.328,0.112 C12.3920003,0.112 12.4879994,0.12799984 12.616,0.16 L18.424,14.512 C18.5200005,14.7360011 18.7359983,14.9119994 19.072,15.04 C19.4080017,15.1680006 19.7359984,15.2559998 20.056,15.304 C20.1520005,15.3360002 20.2279997,15.3799997 20.284,15.436 C20.3400003,15.4920003 20.368,15.5919993 20.368,15.736 C20.368,15.8320005 20.3520002,15.9599992 20.32,16.12 C19.8079974,16.0879998 19.3040025,16.0600001 18.808,16.036 C18.3119975,16.0119999 17.8480022,16 17.416,16 C16.9679978,16 16.4560029,16.0119999 15.88,16.036 C15.3039971,16.0600001 14.7840023,16.0879998 14.32,16.12 C14.2879998,15.9599992 14.272,15.8320005 14.272,15.736 C14.272,15.5919993 14.2999997,15.4920003 14.356,15.436 C14.4120003,15.3799997 14.4639998,15.352 14.512,15.352 C14.9280021,15.2719996 15.2639987,15.1800005 15.52,15.076 C15.7760013,14.9719995 15.904,14.816001 15.904,14.608 C15.904,14.5119995 15.8720003,14.3920007 15.808,14.248 L14.296,10.288 Z M13.912,9.304 L11.68,3.424 L9.352,9.304 L13.912,9.304 Z"/>
</IconBase>
);
}
Color.displayName = 'Color';
module.exports = Color;

17
packages/editor-setters/src/style-setter/lc-style-setter/svglib/contain.js
View File

@ -1,17 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Contain(props) {
return (
<IconBase viewBox="0 0 34 20" {...props}>
<g fillRule="evenodd">
<path d="M28,3 L28,17 L6,17 L6,3 L28,3 Z M10.6221729,13.9997445 C10.5839635,14.0888999 10.5584905,14.1907918 10.5584905,14.2799471 C10.5584905,14.3945754 10.5839635,14.5092038 10.6476459,14.6110956 C10.7622742,14.8021428 10.9660579,14.9167712 11.1825781,14.9167712 L22.518046,14.9167712 C22.7345662,14.9167712 22.9383499,14.8021428 23.0529782,14.6110956 C23.1166606,14.5092038 23.1421336,14.3945754 23.1421336,14.2799471 C23.1421336,14.1780553 23.1166606,14.0888999 23.0784512,13.9997445 L19.2702434,6.38332901 C19.1683516,6.17954532 18.9645679,6.05218051 18.7480477,6.03944403 L18.7098383,6.03944403 C18.4933181,6.03944403 18.3022709,6.14133587 18.1749061,6.3196466 L15.2455155,11.0066715 L14.1501781,9.18535479 C14.0355498,9.07072646 13.8699756,8.99430758 13.7044013,8.99430758 C13.6661919,8.99430758 13.6407189,8.99430758 13.6025095,9.00704406 C13.3987258,9.0452535 13.2331515,9.17261831 13.1312597,9.35092904 L10.6221729,13.9997445 L10.6221729,13.9997445 L10.6221729,13.9997445 Z M13.9279567,6.11938052 C13.9279567,5.20788931 13.1811928,4.46112543 12.2697016,4.46112543 C11.3582104,4.46112543 10.6114465,5.20788931 10.6114465,6.11938052 C10.6114465,7.03087172 11.3582104,7.7776356 12.2697016,7.7776356 C13.1811928,7.7776356 13.9279567,7.04185354 13.9279567,6.11938052 L13.9279567,6.11938052 L13.9279567,6.11938052 Z"/>
<path d="M0,0 L34,0 L34,20 L0,20 L0,0 Z M2,2 L32,2 L32,18 L2,18 L2,2 Z" opacity="0.6"/>
</g>
</IconBase>
);
}
Contain.displayName = 'Contain';
module.exports = Contain;

17
packages/editor-setters/src/style-setter/lc-style-setter/svglib/cover.js
View File

@ -1,17 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Cover(props) {
return (
<IconBase viewBox="0 0 34 23" {...props}>
<g fillRule="evenodd">
<path d="M31,3 L31,23 L3,23 L3,3 L31,3 Z M8.46071454,19.1879428 C8.40310965,19.3223542 8.36470639,19.4759672 8.36470639,19.6103786 C8.36470639,19.7831933 8.40310965,19.956008 8.49911781,20.1096211 C8.67193249,20.3976455 8.97915858,20.5704602 9.30558631,20.5704602 L26.3950378,20.5704602 C26.7214656,20.5704602 27.0286916,20.3976455 27.2015063,20.1096211 C27.2975145,19.956008 27.3359177,19.7831933 27.3359177,19.6103786 C27.3359177,19.4567656 27.2975145,19.3223542 27.2399096,19.1879428 L21.4986219,7.70536748 C21.3450089,7.39814138 21.0377828,7.20612507 20.7113551,7.18692344 L20.6537502,7.18692344 C20.3273225,7.18692344 20.039298,7.34053649 19.8472817,7.60935932 L15.4309066,14.6755595 L13.7795663,11.9297263 C13.6067516,11.7569116 13.3571304,11.6417018 13.1075092,11.6417018 C13.0499043,11.6417018 13.0115011,11.6417018 12.9538962,11.6609034 C12.6466701,11.7185083 12.3970489,11.9105246 12.2434358,12.1793475 L8.46071454,19.1879428 L8.46071454,19.1879428 L8.46071454,19.1879428 Z M13.4445433,7.3074364 C13.4445433,5.93326421 12.3187155,4.8074364 10.9445433,4.8074364 C9.57037111,4.8074364 8.4445433,5.93326421 8.4445433,7.3074364 C8.4445433,8.68160858 9.57037111,9.8074364 10.9445433,9.8074364 C12.3187155,9.8074364 13.4445433,8.69816488 13.4445433,7.3074364 L13.4445433,7.3074364 L13.4445433,7.3074364 Z"/>
<path d="M0,0 L34,0 L34,20 L0,20 L0,0 Z M2,2 L32,2 L32,18 L2,18 L2,2 Z"/>
</g>
</IconBase>
);
}
Cover.displayName = 'Cover';
module.exports = Cover;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-default.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function CursorDefault(props) {
return (
<IconBase viewBox="0 0 1024 1024" {...props}>
<path d="M256 0l612.650667 573.824-250.282667 22.741333-45.44 4.096 18.901333 41.557333 151.850667 332.544L631.68 1024l-144.896-336.128-18.176-42.368-33.578667 31.530667-177.792 166.741333L256 0"/>
</IconBase>
);
}
CursorDefault.displayName = 'CursorDefault';
module.exports = CursorDefault;

15
packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-pointer.js
View File

@ -1,15 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function CursorPointer(props) {
return (
<IconBase viewBox="0 0 1024 1024" {...props}>
<path d="M426.666667 85.333333C473.6 85.333333 512 123.733333 512 170.666667L512 362.666667C512 362.666667 597.333333 352 597.333333 394.666667 597.333333 394.666667 682.666667 384 682.666667 426.666667 682.666667 426.666667 768 416 768 458.666667 768 458.666667 853.333333 448 853.333333 490.666667L853.333333 640C853.333333 682.666667 725.333333 896 725.333333 938.666667L384 938.666667C384 938.666667 298.666667 640 170.666667 554.666667 170.666667 554.666667 128 298.666667 341.333333 512L341.333333 170.666667C341.333333 123.733333 379.733333 85.333333 426.666667 85.333333Z">
</path>
</IconBase>
);
}
CursorPointer.displayName = 'CursorPointer';
module.exports = CursorPointer;

15
packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor.js
View File

@ -1,15 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Cursor(props) {
return (
<IconBase viewBox="0 0 1024 1024" {...props}>
<path d="M597.333333 981.333333C597.333333 981.333333 597.333333 981.333333 597.333333 981.333333c-17.066667 0-34.133333-12.8-38.4-29.866667l-98.133333-294.4c-8.533333-21.333333 4.266667-46.933333 25.6-55.466667 21.333333-8.533333 46.933333 4.266667 55.466667 25.6l59.733333 183.466667 260.266667-652.8L209.066667 422.4l183.466667 59.733333c21.333333 8.533333 34.133333 29.866667 25.6 55.466667-8.533333 21.333333-29.866667 34.133333-55.466667 25.6l-294.4-98.133333C55.466667 460.8 42.666667 443.733333 42.666667 426.666667c0-17.066667 8.533333-34.133333 25.6-42.666667l853.333333-341.333333C938.666667 38.4 955.733333 42.666667 968.533333 55.466667 981.333333 68.266667 985.6 85.333333 977.066667 102.4l-341.333333 853.333333C631.466667 972.8 614.4 981.333333 597.333333 981.333333z"/>
<path d="M170.666667 981.333333c-34.133333 0-64-12.8-89.6-38.4-51.2-51.2-51.2-132.266667 0-179.2l268.8-268.8c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-268.8 268.8C132.266667 832 128 840.533333 128 853.333333s4.266667 21.333333 12.8 29.866667c17.066667 17.066667 42.666667 17.066667 59.733333 0l268.8-268.8c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-268.8 268.8C234.666667 968.533333 204.8 981.333333 170.666667 981.333333z"/>
</IconBase>
);
}
Cursor.displayName = 'Cursor';
module.exports = Cursor;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/dir.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Dir(props) {
return (
<IconBase viewBox="0 0 1024 1024" {...props}>
<path d="M814.622854 508.742816 514.923074 145.338133 209.3751 508.742816 448.612832 508.742816 448.612832 878.661867 575.386144 878.661867 575.386144 508.742816Z"/>
</IconBase>
);
}
Dir.displayName = 'Dir';
module.exports = Dir;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-column.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function DirectionColumn(props) {
return (
<IconBase viewBox="0 0 9 18" {...props}>
<g fillRule="evenodd"><path d="M0 6h9v5H0zm5 9v-3H4v3H2l2.5 3L7 15H5z"/><path opacity=".4" d="M1 1h7v3H1z"/><path d="M1 1v3h7V1H1zM0 0h9v5H0V0z"/></g>
</IconBase>
);
}
DirectionColumn.displayName = 'DirectionColumn';
module.exports = DirectionColumn;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-row.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function DirectionRow(props) {
return (
<IconBase viewBox="0 0 19 9" {...props}>
<g fillRule="evenodd"><path d="M16 4h-4v1h4v2l3-2.5L16 2v2zM6 0h5v9H6z"/><path opacity=".4" d="M1 1h3v7H1z"/><path d="M1 1v7h3V1H1zM0 0h5v9H0V0z"/></g>
</IconBase>
);
}
DirectionRow.displayName = 'DirectionRow';
module.exports = DirectionRow;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/fill.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Fill(props) {
return (
<IconBase viewBox="0 0 1024 1024" {...props}>
<path d="M881.2544 1004.3392c-50.9952 0-92.3648-41.3696-92.3648-92.3648 0-50.9952 92.3648-215.6544 92.3648-215.6544s92.3648 164.6592 92.3648 215.6544S932.4544 1004.3392 881.2544 1004.3392L881.2544 1004.3392zM50.3808 546.6112 449.9456 151.552l399.7696 395.264-399.7696 395.264L50.3808 546.6112 50.3808 546.6112zM449.9456 239.2064l-277.0944 272.384 554.3936 0L449.9456 239.2064 449.9456 239.2064zM272.384 63.488l44.4416-43.8272L449.9456 151.552 405.504 195.3792 272.384 63.488 272.384 63.488zM272.384 63.488"/>
</IconBase>
);
}
Fill.displayName = 'Fill';
module.exports = Fill;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/fixed.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Fixed(props) {
return (
<IconBase viewBox="0 0 1024 1024" {...props}>
<path d="M314.816 666.624l-187.52-198.72 177.792 44.096 285.952-265.024L591.04 129.152l305.472 309.248L760.832 431.04 516.16 732.928l29.184 161.984L365.184 710.848l-233.472 183.552L314.816 666.624z"/>
</IconBase>
);
}
Fixed.displayName = 'Fixed';
module.exports = Fixed;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/flex.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function Flex(props) {
return (
<IconBase viewBox="0 0 23 14" {...props}>
<g fillRule="evenodd"><path d="M21 2v10H2V2h19zm1-1H1v12h21V1z" opacity=".15"/><path d="M1.2 0A1.2 1.2 0 0 0 0 1.2v11.6A1.2 1.2 0 0 0 1.2 14h20.6a1.2 1.2 0 0 0 1.2-1.2V1.2A1.2 1.2 0 0 0 21.8 0H1.2zM22 13H1V1h21v12z"/><path opacity=".4" d="M3 3h5v8H3z"/><path d="M4 4v6h3V4H4zm4-1v8H3V3h5z"/><path opacity=".4" d="M9 3h5v8H9z"/><path d="M10 4v6h3V4h-3zm4-1v8H9V3h5z"/><path opacity=".4" d="M15 3h5v8h-5z"/><path d="M16 4v6h3V4h-3zm4-1v8h-5V3h5z"/></g>
</IconBase>
);
}
Flex.displayName = 'Flex';
module.exports = Flex;

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-family.js
View File

File diff suppressed because one or more lines are too long

14
packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-size.js
View File

@ -1,14 +0,0 @@
const React = require('react');
const IconBase = require('@ali/vu-icon-base');
function FontSize(props) {
return (
<IconBase viewBox="0 0 25 17" {...props}>
<path d="M5.194,7.474 L5.194,14.95 C5.194,15.1646677 5.28266578,15.3163329 5.46,15.405 C5.63733422,15.4936671 5.9359979,15.5613331 6.356,15.608 C6.45866718,15.608 6.51,15.6826659 6.51,15.832 C6.51,15.8973337 6.50066676,15.9766662 6.482,16.07 C6.18333184,16.0513332 5.86833499,16.0350001 5.537,16.021 C5.20566501,16.0069999 4.87200168,16 4.536,16 C4.2093317,16 3.87566837,16.0069999 3.535,16.021 C3.19433163,16.0350001 2.87466816,16.0513332 2.576,16.07 C2.55733324,15.9766662 2.548,15.8973337 2.548,15.832 C2.548,15.7013327 2.5946662,15.6266668 2.688,15.608 C3.1080021,15.5519997 3.4113324,15.4820004 3.598,15.398 C3.7846676,15.3139996 3.878,15.1646677 3.878,14.95 L3.878,7.474 L2.436,7.474 C2.1559986,7.474 1.92033429,7.50199972 1.729,7.558 C1.53766571,7.61400028 1.3720007,7.69799944 1.232,7.81 C1.0919993,7.92200056 0.97066718,8.06666578 0.868,8.244 C0.76533282,8.42133422 0.65800056,8.6266655 0.546,8.86 C0.52733324,8.9066669 0.49700021,8.93933324 0.455,8.958 C0.41299979,8.97666676 0.37333352,8.986 0.336,8.986 C0.23333282,8.986 0.14466704,8.95800028 0.07,8.902 C0.1633338,8.56599832 0.2333331,8.26733464 0.28,8.006 C0.3266669,7.74466536 0.36866648,7.52766753 0.406,7.355 C0.44333352,7.18233247 0.48299979,7.0493338 0.525,6.956 C0.56700021,6.8626662 0.6346662,6.816 0.728,6.816 C0.79333366,6.816 0.88666606,6.82066662 1.008,6.83 C1.12933394,6.83933338 1.25766599,6.84866662 1.393,6.858 C1.52833401,6.86733338 1.6659993,6.87666662 1.806,6.886 C1.9460007,6.89533338 2.07666606,6.9 2.198,6.9 L6.874,6.9 C6.98600056,6.9 7.1119993,6.89533338 7.252,6.886 C7.3920007,6.87666662 7.5319993,6.86733338 7.672,6.858 C7.8120007,6.84866662 7.94033275,6.83933338 8.057,6.83 C8.17366725,6.82066662 8.26933296,6.816 8.344,6.816 C8.4373338,6.816 8.50499979,6.86499951 8.547,6.963 C8.58900021,7.06100049 8.62866648,7.19866578 8.666,7.376 C8.70333352,7.55333422 8.74299979,7.77266536 8.785,8.034 C8.82700021,8.29533464 8.89933282,8.58466508 9.002,8.902 C8.9553331,8.92066676 8.91100021,8.93933324 8.869,8.958 C8.82699979,8.97666676 8.77800028,8.986 8.722,8.986 C8.68466648,8.986 8.6426669,8.97666676 8.596,8.958 C8.5493331,8.93933324 8.51666676,8.9066669 8.498,8.86 C8.39533282,8.6266655 8.29266718,8.42133422 8.19,8.244 C8.08733282,8.06666578 7.96833401,7.92200056 7.833,7.81 C7.69766599,7.69799944 7.53433429,7.61400028 7.343,7.558 C7.15166571,7.50199972 6.9160014,7.474 6.636,7.474 L5.194,7.474 Z M17.962,1.384 L17.962,14.2 C17.962,14.5680018 18.1139985,14.8279992 18.418,14.98 C18.7220015,15.1320008 19.2339964,15.2479996 19.954,15.328 C20.1300009,15.328 20.218,15.4559987 20.218,15.712 C20.218,15.8240006 20.2020002,15.9599992 20.17,16.12 C19.6579974,16.0879998 19.1180028,16.0600001 18.55,16.036 C17.9819972,16.0119999 17.4100029,16 16.834,16 C16.2739972,16 15.7020029,16.0119999 15.118,16.036 C14.5339971,16.0600001 13.9860026,16.0879998 13.474,16.12 C13.4419998,15.9599992 13.426,15.8240006 13.426,15.712 C13.426,15.4879989 13.5059992,15.3600002 13.666,15.328 C14.3860036,15.2319995 14.9059984,15.1120007 15.226,14.968 C15.5460016,14.8239993 15.706,14.5680018 15.706,14.2 L15.706,1.384 L13.234,1.384 C12.7539976,1.384 12.3500016,1.43199952 12.022,1.528 C11.6939984,1.62400048 11.4100012,1.76799904 11.17,1.96 C10.9299988,2.15200096 10.7220009,2.39999848 10.546,2.704 C10.3699991,3.00800152 10.186001,3.359998 9.994,3.76 C9.96199984,3.8400004 9.91000036,3.89599984 9.838,3.928 C9.76599964,3.96000016 9.69800032,3.976 9.634,3.976 C9.45799912,3.976 9.30600064,3.92800048 9.178,3.832 C9.3380008,3.25599712 9.4579996,2.74400224 9.538,2.296 C9.6180004,1.84799776 9.68999968,1.47600148 9.754,1.18 C9.81800032,0.88399852 9.88599964,0.6560008 9.958,0.496 C10.0300004,0.3359992 10.1459992,0.256 10.306,0.256 C10.4180006,0.256 10.577999,0.26399992 10.786,0.28 C10.994001,0.29600008 11.2139988,0.31199992 11.446,0.328 C11.6780012,0.34400008 11.9139988,0.35999992 12.154,0.376 C12.3940012,0.39200008 12.617999,0.4 12.826,0.4 L20.842,0.4 C21.034001,0.4 21.2499988,0.39200008 21.49,0.376 C21.7300012,0.35999992 21.9699988,0.34400008 22.21,0.328 C22.4500012,0.31199992 22.669999,0.29600008 22.87,0.28 C23.070001,0.26399992 23.2339994,0.256 23.362,0.256 C23.5220008,0.256 23.6379996,0.33999916 23.71,0.508 C23.7820004,0.67600084 23.8499997,0.91199848 23.914,1.216 C23.9780003,1.52000152 24.0459996,1.89599776 24.118,2.344 C24.1900004,2.79200224 24.3139991,3.28799728 24.49,3.832 C24.4099996,3.86400016 24.3340004,3.89599984 24.262,3.928 C24.1899996,3.96000016 24.1060005,3.976 24.01,3.976 C23.9459997,3.976 23.8740004,3.96000016 23.794,3.928 C23.7139996,3.89599984 23.6580002,3.8400004 23.626,3.76 C23.4499991,3.359998 23.2740009,3.00800152 23.098,2.704 C22.9219991,2.39999848 22.7180012,2.15200096 22.486,1.96 C22.2539988,1.76799904 21.9740016,1.62400048 21.646,1.528 C21.3179984,1.43199952 20.9140024,1.384 20.434,1.384 L17.962,1.384 Z"/>
</IconBase>
);
}
FontSize.displayName = 'FontSize';
module.exports = FontSize;

Some files were not shown because too many files have changed in this diff Show More