Skip to content

Commit 11a6c55

Browse files
Marc-Andre-RivetMarc-Andre-Rivet
committed
Styling props (plotly#165)
* - additional props - generator functions for style, proptypes, py2js prop mapping * simplify dash facing style api
1 parent a580bd0 commit 11a6c55

File tree

11 files changed

+5302
-25933
lines changed

11 files changed

+5302
-25933
lines changed

‎packages/dash-table/dash_table/bundle.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/dash-table/dash_table/demo.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/dash-table/dash_table/metadata.json

+192-20,182
Large diffs are not rendered by default.

‎packages/dash-table/dash_table/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
"webpack": "^4.8.3",
7373
"webpack-cli": "^2.1.3",
7474
"webpack-dev-server": "^3.1.5",
75-
"webpack-preprocessor": "^0.1.11"
75+
"webpack-preprocessor": "^0.1.12"
7676
},
7777
"peerDependencies": {
7878
"react": ">=0.14",

‎packages/dash-table/generator/cssPropertiesGenerator.js

+359
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,359 @@
1+
const props = [
2+
'alignContent',
3+
'alignItems',
4+
'alignmentAdjust',
5+
'alignmentBaseline',
6+
'alignSelf',
7+
'animationDelay',
8+
'animationDirection',
9+
'animationIterationCount',
10+
'animationName',
11+
'animationPlayState',
12+
'appearance',
13+
'backfaceVisibility',
14+
'background',
15+
'backgroundAttachment',
16+
'backgroundBlendMode',
17+
'backgroundColor',
18+
'backgroundComposite',
19+
'backgroundImage',
20+
'backgroundOrigin',
21+
'backgroundPosition',
22+
'backgroundRepeat',
23+
'baselineShift',
24+
'behavior',
25+
'border',
26+
'borderBottom',
27+
'borderBottomColor',
28+
'borderBottomLeftRadius',
29+
'borderBottomRightRadius',
30+
'borderBottomStyle',
31+
'borderBottomWidth',
32+
'borderCollapse',
33+
'borderColor',
34+
'borderCornerShape',
35+
'borderImageSource',
36+
'borderImageWidth',
37+
'borderLeft',
38+
'borderLeftColor',
39+
'borderLeftStyle',
40+
'borderLeftWidth',
41+
'borderRight',
42+
'borderRightColor',
43+
'borderRightStyle',
44+
'borderRightWidth',
45+
'borderSpacing',
46+
'borderStyle',
47+
'borderTop',
48+
'borderTopColor',
49+
'borderTopLeftRadius',
50+
'borderTopRightRadius',
51+
'borderTopStyle',
52+
'borderTopWidth',
53+
'borderWidth',
54+
'bottom',
55+
'boxAlign',
56+
'boxDecorationBreak',
57+
'boxDirection',
58+
'boxFlex',
59+
'boxFlexGroup',
60+
'boxLineProgression',
61+
'boxLines',
62+
'boxOrdinalGroup',
63+
'boxShadow',
64+
'breakAfter',
65+
'breakBefore',
66+
'breakInside',
67+
'clear',
68+
'clip',
69+
'clipRule',
70+
'color',
71+
'columnCount',
72+
'columnFill',
73+
'columnGap',
74+
'columnRule',
75+
'columnRuleColor',
76+
'columnRuleWidth',
77+
'columns',
78+
'columnSpan',
79+
'columnWidth',
80+
'counterIncrement',
81+
'counterReset',
82+
'cue',
83+
'cueAfter',
84+
'cursor',
85+
'direction',
86+
'display',
87+
'fill',
88+
'fillOpacity',
89+
'fillRule',
90+
'filter',
91+
'flex',
92+
'flexAlign',
93+
'flexBasis',
94+
'flexDirection',
95+
'flexFlow',
96+
'flexGrow',
97+
'flexItemAlign',
98+
'flexLinePack',
99+
'flexOrder',
100+
'flexShrink',
101+
'flexWrap',
102+
'float',
103+
'flowFrom',
104+
'font',
105+
'fontFamily',
106+
'fontKerning',
107+
'fontSize',
108+
'fontSizeAdjust',
109+
'fontStretch',
110+
'fontStyle',
111+
'fontSynthesis',
112+
'fontVariant',
113+
'fontVariantAlternates',
114+
'fontWeight',
115+
'gridArea',
116+
'gridColumn',
117+
'gridColumnEnd',
118+
'gridColumnStart',
119+
'gridRow',
120+
'gridRowEnd',
121+
'gridRowPosition',
122+
'gridRowSpan',
123+
'gridTemplateAreas',
124+
'gridTemplateColumns',
125+
'gridTemplateRows',
126+
'height',
127+
'hyphenateLimitChars',
128+
'hyphenateLimitLines',
129+
'hyphenateLimitZone',
130+
'hyphens',
131+
'imeMode',
132+
'justifyContent',
133+
'layoutGrid',
134+
'layoutGridChar',
135+
'layoutGridLine',
136+
'layoutGridMode',
137+
'layoutGridType',
138+
'left',
139+
'letterSpacing',
140+
'lineBreak',
141+
'lineClamp',
142+
'lineHeight',
143+
'listStyle',
144+
'listStyleImage',
145+
'listStylePosition',
146+
'listStyleType',
147+
'margin',
148+
'marginBottom',
149+
'marginLeft',
150+
'marginRight',
151+
'marginTop',
152+
'marqueeDirection',
153+
'marqueeStyle',
154+
'mask',
155+
'maskBorder',
156+
'maskBorderRepeat',
157+
'maskBorderSlice',
158+
'maskBorderSource',
159+
'maskBorderWidth',
160+
'maskClip',
161+
'maskOrigin',
162+
'maxFontSize',
163+
'maxHeight',
164+
'maxWidth',
165+
'minHeight',
166+
'minWidth',
167+
'opacity',
168+
'order',
169+
'orphans',
170+
'outline',
171+
'outlineColor',
172+
'outlineOffset',
173+
'overflow',
174+
'overflowStyle',
175+
'overflowX',
176+
'overflowY',
177+
'padding',
178+
'paddingBottom',
179+
'paddingLeft',
180+
'paddingRight',
181+
'paddingTop',
182+
'pageBreakAfter',
183+
'pageBreakBefore',
184+
'pageBreakInside',
185+
'pause',
186+
'pauseAfter',
187+
'pauseBefore',
188+
'perspective',
189+
'perspectiveOrigin',
190+
'pointerEvents',
191+
'position',
192+
'punctuationTrim',
193+
'quotes',
194+
'regionFragment',
195+
'restAfter',
196+
'restBefore',
197+
'right',
198+
'rubyAlign',
199+
'rubyPosition',
200+
'shapeImageThreshold',
201+
'shapeInside',
202+
'shapeMargin',
203+
'shapeOutside',
204+
'speak',
205+
'speakAs',
206+
'strokeOpacity',
207+
'strokeWidth',
208+
'tableLayout',
209+
'tabSize',
210+
'textAlign',
211+
'textAlignLast',
212+
'textDecoration',
213+
'textDecorationColor',
214+
'textDecorationLine',
215+
'textDecorationLineThrough',
216+
'textDecorationNone',
217+
'textDecorationOverline',
218+
'textDecorationSkip',
219+
'textDecorationStyle',
220+
'textDecorationUnderline',
221+
'textEmphasis',
222+
'textEmphasisColor',
223+
'textEmphasisStyle',
224+
'textHeight',
225+
'textIndent',
226+
'textJustifyTrim',
227+
'textKashidaSpace',
228+
'textLineThrough',
229+
'textLineThroughColor',
230+
'textLineThroughMode',
231+
'textLineThroughStyle',
232+
'textLineThroughWidth',
233+
'textOverflow',
234+
'textOverline',
235+
'textOverlineColor',
236+
'textOverlineMode',
237+
'textOverlineStyle',
238+
'textOverlineWidth',
239+
'textRendering',
240+
'textScript',
241+
'textShadow',
242+
'textTransform',
243+
'textUnderlinePosition',
244+
'textUnderlineStyle',
245+
'top',
246+
'touchAction',
247+
'transform',
248+
'transformOrigin',
249+
'transformOriginZ',
250+
'transformStyle',
251+
'transition',
252+
'transitionDelay',
253+
'transitionDuration',
254+
'transitionProperty',
255+
'transitionTimingFunction',
256+
'unicodeBidi',
257+
'unicodeRange',
258+
'userFocus',
259+
'userInput',
260+
'verticalAlign',
261+
'visibility',
262+
'voiceBalance',
263+
'voiceDuration',
264+
'voiceFamily',
265+
'voicePitch',
266+
'voiceRange',
267+
'voiceRate',
268+
'voiceStress',
269+
'voiceVolume',
270+
'whiteSpace',
271+
'whiteSpaceTreatment',
272+
'widows',
273+
'width',
274+
'wordBreak',
275+
'wordSpacing',
276+
'wordWrap',
277+
'wrapFlow',
278+
'wrapMargin',
279+
'wrapOption',
280+
'writingMode',
281+
'zIndex',
282+
'zoom'
283+
];
284+
285+
function toSnakeCase(name) {
286+
return name.replace(/[A-Z]/g, v => `_${v.toLowerCase()}`);
287+
}
288+
289+
function toKebabCase(name) {
290+
return name.replace(/[A-Z]/g, v => `-${v.toLowerCase()}`);
291+
}
292+
293+
const snakes = props.map(prop => [toSnakeCase(prop), prop]);
294+
const kebabs = props.map(prop => [toKebabCase(prop), prop]);
295+
const camels = props.map(prop => [prop, prop]);
296+
297+
const map = new Map();
298+
299+
snakes.forEach(([snake, camel]) => map.set(snake, camel));
300+
kebabs.forEach(([kebab, camel]) => map.set(kebab, camel));
301+
camels.forEach(([camel]) => map.set(camel, camel));
302+
303+
map.forEach((value, key) => console.log(value, key));
304+
console.log(map.size);
305+
306+
const fs = require('fs');
307+
308+
var stream1 = fs.createWriteStream("src/dash-table/derived/style/py2jsCssProperties.ts");
309+
stream1.once('open', () => {
310+
stream1.write('export type StyleProperty = string | number;\n');
311+
stream1.write('\n');
312+
stream1.write('export default new Map<string, string>([\n');
313+
314+
let first = true;
315+
map.forEach((value, key) => {
316+
if (!first) {
317+
stream1.write(',\n');
318+
}
319+
320+
first = false;
321+
stream1.write(` ['${key}', '${value}']`);
322+
});
323+
stream1.write('\n]);')
324+
325+
stream1.end();
326+
});
327+
328+
var stream2 = fs.createWriteStream("src/dash-table/derived/style/IStyle.ts");
329+
stream2.once('open', () => {
330+
stream2.write(`import { StyleProperty } from './ py2jsCssProperties';\n`);
331+
stream2.write('\n');
332+
stream2.write('export default interface IStyle {\n');
333+
camels.forEach(([key]) => {
334+
stream2.write(` ${key}: StyleProperty;\n`);
335+
});
336+
stream2.write('}')
337+
338+
stream2.end();
339+
});
340+
341+
var stream3 = fs.createWriteStream("proptypes.js");
342+
stream3.once('open', () => {
343+
let first = true;
344+
map.forEach((value, key) => {
345+
if (!first) {
346+
stream3.write(',\n');
347+
}
348+
349+
first = false;
350+
if (key.indexOf('-') !== -1) {
351+
stream3.write(` '${key}': PropTypes.oneOfType([PropTypes.string, PropTypes.number])`);
352+
} else {
353+
stream3.write(` ${key}: PropTypes.oneOfType([PropTypes.string, PropTypes.number])`);
354+
}
355+
});
356+
stream3.write('\n')
357+
358+
stream3.end();
359+
});

0 commit comments

Comments
 (0)