1+ export default {
2+ /**
3+ * @module svgTags Provides methods to generate SVG based tags for content and object.
4+ */
5+
6+ /**
7+ * @method stringToNum Convert a string into a repeatable numeric value in a range from 0 to modSize.
8+ * @param {string } inputString - The input string to be converted.
9+ * @param {number } modSize - The modulo value (must be greater than 0). Set to 1 + max desired return value.
10+ * @returns {number } The numeric representation of the input string.
11+ */
12+ stringToNum ( inputString = '@#$%^&*' , modSize = 46 ) {
13+ if ( modSize <= 0 ) { throw new Error ( 'modSize must be greater than 0' ) ; }
14+ return [ ...inputString ] . reduce ( ( acc , char ) => ( acc + char . charCodeAt ( 0 ) ) % modSize , 0 ) ;
15+ } ,
16+
17+
18+ /**
19+ * @const {array} colors Array of colors for use with various SVG generators.
20+ */
21+ colors : [
22+ "#DA0862" ,
23+ "#E3005D" ,
24+ "#E90047" ,
25+ "#EC0A28" ,
26+ "#EB1700" ,
27+ "#EA2500" ,
28+ "#E63100" ,
29+ "#DF3D00" ,
30+ "#D35100" ,
31+ "#CB5E00" ,
32+ "#BF6D00" ,
33+ "#B07000" ,
34+ "#A17A00" ,
35+ "#8F8000" ,
36+ "#777700" ,
37+ "#659400" ,
38+ "#4E9B00" ,
39+ "#1E9F00" ,
40+ "#00A000" ,
41+ "#00A21A" ,
42+ "#00A43B" ,
43+ "#00A653" ,
44+ "#00A869" ,
45+ "#00A87F" ,
46+ "#00A693" ,
47+ "#00A2A7" ,
48+ "#00A0B3" ,
49+ "#009FBD" ,
50+ "#009AC9" ,
51+ "#0094D4" ,
52+ "#008CF0" ,
53+ "#0084FF" ,
54+ "#007CFF" ,
55+ "#0072FF" ,
56+ "#2D6BFF" ,
57+ "#4E63FF" ,
58+ "#625BFF" ,
59+ "#724FFF" ,
60+ "#7F49F8" ,
61+ "#8E43E3" ,
62+ "#9D3DD8" ,
63+ "#AA36CA" ,
64+ "#B52FB8" ,
65+ "#C126A7" ,
66+ "#CA1D94" ,
67+ "#D31580"
68+ ] ,
69+
70+ /**
71+ * @method listToTags Create colored tags based on the input string of comma separated values.
72+ * @param {string } inputString - The input string to create colored tags from.
73+ * @returns {string } HTML representation of colored elements.
74+ */
75+ listToTags ( inputString = 'Testing, one, two, three' ) {
76+ const values = inputString . split ( ',' ) . map ( ( value ) => value . trim ( ) ) ;
77+
78+ const coloredElements = values . map ( ( value ) => {
79+ const colorIndex = this . stringToNum ( value ) ;
80+ const textColor = this . colors [ colorIndex ] ;
81+ const backgroundColor = `${ textColor } ;
82+
83+ return `
84+ <button style="
85+ color: ${ textColor }
86+ background-color: ${ backgroundColor }
87+ padding: 1px 12px;
88+ border-radius: 50vh;
89+ border: none;
90+ font: ${ appsmith . theme . fontFamily . appFont }
91+ font-size: 13px;
92+ font-weight: 450;
93+ display: inline-block;
94+ align-items: center !important;
95+ ">
96+ ${ value }
97+ </button>` ;
98+ } ) ;
99+
100+ const coloredElementsHTML = coloredElements . join ( '' ) ;
101+
102+ return `
103+ <div class="colored-elements-container" style="white-space: normal !important">
104+ ${ coloredElementsHTML }
105+ </div>
106+ ` ;
107+ } ,
108+
109+ /**
110+ * @method nameToInitialsSVG Create an SVG representation of colored initials from the input string and return it as a Data URI.
111+ * @param {string } str - The input string to generate initials from.
112+ * @returns {string } Data URI of the generated SVG.
113+ */
114+ nameToInitialsSVG ( str = 'Test User ' ) {
115+ const color = this . colors [ this . stringToNum ( str ) ] ;
116+ const backgroundColor = `${ color } ;
117+ const initials = str . split ( ' ' ) . map ( word => word . charAt ( 0 ) . toUpperCase ( ) ) . join ( '' ) ;
118+
119+ const svg = `
120+ <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
121+ <circle cx="50%" cy="50%" r="40%" fill="${ backgroundColor } ${ color }
122+ <text x="50%" y="50%" text-anchor="middle" dy="0.3em" font-size="${ ( 6 - initials . length ) * 8 } ${ color }
123+ ${ initials }
124+ </text>
125+ </svg>
126+ ` ;
127+
128+ const dataURI = `data:image/svg+xml;base64,${ btoa ( svg ) } ;
129+
130+ return dataURI ;
131+ } ,
132+
133+ /**
134+ * @method selectOptions Generates array of {label, value} objects sorted by label & with unique values, for use in Select or List widgets.
135+ * Supports nested paths, and filters out options where the label or value are null or undefined.
136+ * @param {array } data - An array of objects, from your API or Query response.
137+ * @param {string } label - A property name, or valid json path.
138+ * @param {array } value - A property name, or valid json path.
139+ * @returns {array } - [{label, value},...] or empty array if path is invalid.
140+ */
141+ selectOptions ( data = getUsers . data . results , label = 'name.first' , value = 'login.username' ) {
142+ return _ . orderBy (
143+ _ . uniqBy (
144+ data . map ( obj => ( {
145+ label : _ . get ( obj , label ) ,
146+ value : _ . get ( obj , value )
147+ } ) ) . filter ( obj => ! ! obj . label && ! ! obj . value ) ,
148+ o => o . label
149+ ) ,
150+ 'label'
151+ ) ;
152+ } ,
153+
154+ /**
155+ * @method objToRows Converts a single object to an array of {property, value} objects,
156+ * for viewing a single row vertically in Select or List widgets.
157+ * @param {object } obj - A single row of data from an API, Query, or selected table/list row.
158+ * @returns {array } - [{property, value},...] or empty array if obj us invalid.
159+ */
160+ objToRows ( obj = '123' ) {
161+ if ( ! obj || typeof obj != 'object' ) { return [ ] }
162+ return Object . entries ( obj ) . map ( ( [ prop , value ] ) => ( { prop, value } ) )
163+ }
164+
165+ }
0 commit comments