Skip to content
Permalink
Browse files

v3.0.0

  • Loading branch information
canisminor1990 committed Mar 7, 2018
1 parent 96088cd commit ab513da7a23ad265df4e5f5f655312d989f04c02
@@ -29,6 +29,7 @@ module.exports = {
'NSColor': true,
'NSWorkspace': true,
'NSURL': true,
'localStorage': true,
},
env: {
'es6': true,
@@ -30,11 +30,13 @@
},
"appcast": "https://raw.githubusercontent.com/canisminor1990/sketch-select/master/.appcast.xml",
"scripts": {
"start:plugin": "cross-env NODE_ENV=development skpm-build --run",
"start": "concurrently \"yarn start:panel\" \"yarn start:plugin\"",
"start:plugin": "cross-env NODE_ENV=development skpm-build --watch",
"start:panel": "roadhog dev",
"build:plugin": "skpm-build --run",
"build:panel": "roadhog build",
"build": "yarn build:panel && yarn build:plugin",
"build:plugin": "cross-env NODE_ENV=production skpm-build",
"build:panel": "roadhog build",
"test": "cross-env NODE_ENV=production skpm-build --watch",
"link": "skpm-link",
"lint": "lint-staged",
"lint:es": "eslint --fix --ext .js ./"
@@ -75,7 +77,7 @@
"lodash": "^4.17.4",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"sketch-module-web-view": "^0.1.4"
"sketch-module-web-view": "^0.2.6"
},
"devDependencies": {
"babel-core": "^6.26.0",
@@ -84,6 +86,7 @@
"babel-plugin-lodash": "^3.2.11",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"concurrently": "^3.5.1",
"cross-env": "^5.1.3",
"eslint": "^4.13.1",
"eslint-config-prettier": "^2.9.0",
@@ -0,0 +1,31 @@
import { Checkbox, Input } from 'antd';
import { connect } from 'dva';
import style from './index.scss';

const State = ({ config }) => ({ config });

const Selection = ({ dispatch, config, title, type }) => {
const update = (data, type = 'config') => {
dispatch({ type: `${type}/update`, payload: data });
};
const onCheck = (e, type) => {
const checked = e.target.checked;
update({ [`${type}Checked`]: checked }, 'config');
};
const onInputChange = (e, type) => {
const value = e.target.value;
update({ [type]: value }, 'config');
};

return (
<Checkbox
className={style.selection}
checked={config[`${type}Checked`]}
onChange={e => onCheck(e, type)}
>
<Input addonBefore={title} value={config[type]} onChange={e => onInputChange(e, type)} />
</Checkbox>
);
};

export default connect(State)(Selection);
@@ -0,0 +1,10 @@
.selection {
display: block;
margin-left: 0 !important;
display: flex;
align-items: center;
margin-bottom: 0.5rem;
> span:last-child {
flex: 1;
}
}
@@ -0,0 +1,23 @@
import { Switch } from 'antd';
import { connect } from 'dva';
import style from './index.scss';

const State = ({ config }) => ({ config });

const Switchbox = ({ dispatch, config, title, type }) => {
const update = (data, type = 'config') => {
dispatch({ type: `${type}/update`, payload: data });
};
const onSwitch = (checked, type) => {
update({ [`${type}Switch`]: checked }, 'config');
};

return (
<div className={style.globalSwitch}>
<Switch checked={config[`${type}Switch`]} size="small" onChange={e => onSwitch(e, type)} />
<span>{title}</span>
</div>
);
};

export default connect(State)(Switchbox);
@@ -0,0 +1,7 @@
.globalSwitch {
display: flex;
align-items: center;
> span {
margin-right: 0.5rem;
}
}
@@ -1 +1,3 @@
export { default as Copyright } from './Copyright';
export { default as Selection } from './Selection';
export { default as Switchbox } from './Switchbox';
@@ -1,8 +1,6 @@
import { message } from 'antd';
import dva from 'dva';
import createLoading from 'dva-loading';

import router from './router';
import './index.scss';

// 1. Initialize
@@ -20,7 +18,13 @@ app.model(require('./models/layers').default);
app.use(createLoading());

// 3. Router
app.router(router);
app.router(require('./router').default);

// 4. Start
app.start('#root');

// 5. Sketch
window.getSelection = json => localStorage.setItem('selection', JSON.stringify(json));

// Disable the context menu to have a more native feel
document.addEventListener('contextmenu', e => e.preventDefault());
@@ -5,44 +5,51 @@ const Checked = type => ({
const Switch = type => ({
[`${type}Switch`]: false,
});

const defaultConfig = {
...Switch('global'),
...Checked('type'),
...Checked('name'),
...Checked('id'),
// rect
...Checked('x'),
...Checked('y'),
...Checked('width'),
...Checked('height'),
// text
...Checked('text'),
...Switch('textReg'),
...Checked('alignment'),
...Checked('lineSpacing'),
...Checked('fixedWidth'),
// shape
...Checked('fillColor'),
...Checked('fillType'),
...Checked('borderColor'),
...Checked('borderThickness'),
// symbol
...Checked('symbolId'),
// other
...Switch('exportable'),
...Switch('hide'),
...Switch('lock'),
};
export default {
namespace: 'config',

state: {
...Switch('global'),
...Checked('type'),
...Checked('name'),
...Checked('x'),
...Checked('y'),
...Checked('width'),
...Checked('height'),
// text
...Checked('content'),
...Switch('contentReg'),
...Checked('typeface'),
...Checked('weight'),
...Checked('size'),
...Checked('alignment'),
...Checked('spacing'),
...Checked('color'),
// shape
...Checked('fills'),
...Checked('borders'),
...Checked('opacity'),
...Checked('blending'),
...Checked('shadows'),
...Checked('innerShadows'),
...Checked('gaussianBlur'),
// other
...Checked('exportable'),
...Checked('hidden'),
page: 'Any',
...defaultConfig,
},

reducers: {
updateSuccess(state, action) {
const payload = action.payload;
return { ...state, ...payload };
},
reset(state, action) {
return { ...state, ...defaultConfig };
},
},

effects: {
@@ -1,3 +1,9 @@
const defaultConfig = {
checkedList: [],
indeterminate: false,
checkAll: false,
};

export default {
namespace: 'layers',

@@ -13,12 +19,13 @@ export default {
'SymbolMaster',
'SymbolOverride',
],
checkedList: [],
indeterminate: true,
checkAll: false,
...defaultConfig,
},

reducers: {
reset(state, action) {
return { ...state, ...defaultConfig };
},
updateSuccess(state, action) {
const payload = action.payload;
return { ...state, ...payload };
@@ -1,4 +1,4 @@
import Tab from '../tab';
import Tab from '../Tab';
import { connect } from 'dva';
import { Collapse, Checkbox } from 'antd';
import style from '../index.scss';
@@ -30,35 +30,19 @@ class Page extends Tab {
);
};

Name = () => <this.Selection title="Name" type="name" />;

Rectangle = () => {
return (
<div>
<this.Selection title="X" type="x" />
<this.Selection title="Y" type="y" />
<this.Selection title="Width" type="width" />
<this.Selection title="Height" type="height" />
</div>
);
};

render() {
return (
<div className={style.page}>
<Collapse defaultActiveKey={['1', '2', '3']} className={style.container}>
<Panel header="LayerTypes" key="1">
<this.LayerTypes />
</Panel>
<Panel header="Name" key="2">
<this.Name />
</Panel>
<Panel header="Rectangle" key="3">
<this.Rectangle />
</Panel>
</Collapse>
<this.FootBar />
</div>
<Collapse defaultActiveKey={['1', '2', '3']} className={style.container}>
<Panel header="LayerTypes" key="1">
<this.LayerTypes />
</Panel>
<Panel header="Name" key="2">
<this.Name />
</Panel>
<Panel header="Rectangle" key="3">
<this.Rectangle />
</Panel>
</Collapse>
);
}

This file was deleted.

@@ -1,7 +1,27 @@
import Component from '../tab';
import Tab from '../Tab';
import { connect } from 'dva';
import { Collapse } from 'antd';
import style from '../index.scss';
export default class extends Component {
const Panel = Collapse.Panel;

class Page extends Tab {
// Components

render() {
return <div>1234</div>;
return (
<Collapse defaultActiveKey={['1', '2', '3']} className={style.container}>
<Panel header="Style" key="1">
<this.Style />
</Panel>
<Panel header="Name" key="2">
<this.Name />
</Panel>
<Panel header="Rectangle" key="3">
<this.Rectangle />
</Panel>
</Collapse>
);
}
}

export default connect(Tab.State, Tab.Func)(Page);
@@ -1,7 +1,33 @@
import Component from '../tab';
import Tab from '../Tab';
import { connect } from 'dva';
import { Collapse } from 'antd';
import { Selection } from '../../components';
import style from '../index.scss';
export default class extends Component {
const Panel = Collapse.Panel;

class Page extends Tab {
// Components
Symbol = () => (
<div>
<Selection title="Symbol ID" type="symbolId" />
</div>
);

render() {
return <div>1234</div>;
return (
<Collapse defaultActiveKey={['1', '2', '3']} className={style.container}>
<Panel header="Symbol" key="1">
<this.Symbol />
</Panel>
<Panel header="Name" key="2">
<this.Name />
</Panel>
<Panel header="Rectangle" key="3">
<this.Rectangle />
</Panel>
</Collapse>
);
}
}

export default connect(Tab.State, Tab.Func)(Page);

0 comments on commit ab513da

Please sign in to comment.
You can’t perform that action at this time.