feat: added namespaced id generation

trutoo · Jan 28, 2020 · 82e3129 · 82e3129
1 parent 825be83
commit 82e3129
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 20 deletions.
diff --git a/packages/ui-core/src/components/Button/Button.tsx b/packages/ui-core/src/components/Button/Button.tsx
@@ -16,9 +16,8 @@ interface State {
 export default class Button extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
-    window.eid = window.eid || 0;
     this.state = {
-      id: `id-${window.eid++}`,
+      id: window.uikit.nextId(),
     };
   }
 

diff --git a/packages/ui-core/src/components/CheckBox/CheckBox.tsx b/packages/ui-core/src/components/CheckBox/CheckBox.tsx
@@ -28,10 +28,9 @@ export default class CheckBox extends Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    window.eid = window.eid || 0;
     this.validator = new Validator<boolean>(this.props.validators);
     this.state = {
-      id: `id-${window.eid++}`,
+      id: window.uikit.nextId(),
       invalid: false,
       focused: false,
       errors: [],

diff --git a/packages/ui-core/src/components/RadioButton/RadioButton.tsx b/packages/ui-core/src/components/RadioButton/RadioButton.tsx
@@ -28,10 +28,9 @@ export default class RadioButton extends Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    window.eid = window.eid || 0;
     this.validator = new Validator<string>(this.props.validators);
     this.state = {
-      id: `id-${window.eid++}`,
+      id: window.uikit.nextId(),
       invalid: false,
       focused: false,
       errors: [],

diff --git a/packages/ui-core/src/components/Select/Select.tsx b/packages/ui-core/src/components/Select/Select.tsx
@@ -41,9 +41,8 @@ export default class Select extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.validator = new Validator(this.props.validators);
-    window.eid = window.eid || 0;
     this.state = {
-      id: `id-${window.eid++}`,
+      id: window.uikit.nextId(),
       invalid: false,
       focused: false,
       errors: [],

diff --git a/packages/ui-core/src/components/TextArea/TextArea.tsx b/packages/ui-core/src/components/TextArea/TextArea.tsx
@@ -27,10 +27,9 @@ export default class TextArea extends Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    window.eid = window.eid || 0;
     this.validator = new Validator(this.props.validators);
     this.state = {
-      id: `id-${window.eid++}`,
+      id: window.uikit.nextId(),
       invalid: false,
       focused: false,
       errors: [],
@@ -79,8 +78,7 @@ export default class TextArea extends Component<Props, State> {
           (this.state.focused ? ' focused' : '') +
           (this.props.disabled ? ' disabled' : '') +
           (this.state.invalid ? ' invalid ' : '')
-        }
-      >
+        }>
         {this.props.label && (
           <label className={'tu-textarea--label' + (this.hasValueOrFocus() ? ' floating' : '')} htmlFor={this.state.id}>
             {this.props.label}

diff --git a/packages/ui-core/src/components/TextField/TextField.tsx b/packages/ui-core/src/components/TextField/TextField.tsx
@@ -32,10 +32,9 @@ export default class TextField extends Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    window.eid = window.eid || 0;
     this.validator = new Validator(this.props.validators);
     this.state = {
-      id: `id-${window.eid++}`,
+      id: window.uikit.nextId(),
       invalid: false,
       focused: false,
       errors: [],

diff --git a/packages/ui-core/src/framework/core.ts b/packages/ui-core/src/framework/core.ts
@@ -5,11 +5,24 @@ export {};
 declare global {
   interface Window {
     /** Counter for unique identifiers */
-    eid: number;
+    uikit: {
+      ids: { [namespace: string]: number; default: number };
+      nextId: (namespace?: string) => string;
+    };
   }
 }
 
 (function() {
   // Make sure there is an incremental ID each component can use
-  window.eid || (window.eid = 0);
+  if (window.uikit) {
+    window.uikit = {
+      ids: { default: 0 },
+      nextId(namespace?: string): string {
+        if (!namespace || namespace == 'default') return `id-${this.ids.default++}`;
+        if (this.ids[namespace]) return `id-${namespace}-${this.ids[namespace]++}`;
+        this.ids[namespace] = 0;
+        return `id-${namespace}-${this.ids[namespace]}`;
+      },
+    };
+  }
 })();
diff --git a/packages/ui-datepicker/src/Datepicker.tsx b/packages/ui-datepicker/src/Datepicker.tsx
@@ -55,7 +55,6 @@ export default class Datepicker extends Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    window.eid = window.eid || 0;
     this.todaysDate = new Date();
     this.todaysDate.setHours(0, 0, 0, 0);
     this.validator = new Validator(props.validators);
@@ -66,7 +65,7 @@ export default class Datepicker extends Component<Props, State> {
     focusedDate.setHours(0, 0, 0, 0);
 
     this.state = {
-      id: `id-${window.eid++}`,
+      id: window.uikit.nextId(),
       invalid: false,
       focused: false,
       days: this.genDays(this.props.weekday),

diff --git a/packages/ui-typeahead/src/Typeahead.tsx b/packages/ui-typeahead/src/Typeahead.tsx
@@ -59,10 +59,9 @@ export default class Typeahead<T extends TypeaheadResult = TypeaheadResult> exte
 
   constructor(props: Props<T>) {
     super(props);
-    window.eid = window.eid || 0;
     this.validator = new Validator(props.validators);
     this.state = {
-      id: `id-${window.eid++}`,
+      id: window.uikit.nextId(),
       invalid: false,
       focused: false,
       active: -1,