Giter VIP home page Giter VIP logo

fulcro-rad-semantic-ui's People

Contributors

awkay avatar currentoor avatar danskarda avatar gpellis avatar holyjak avatar markth0mas avatar michaelwhitford avatar murtaza52 avatar roklenarcic avatar roterski avatar tylernisonoff avatar yenda avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

adamfeldman gpellis murtaza52 zilti aeberts tylernisonoff markth0mas thosmos roterski xroger88 holyjak somanythings roklenarcic michaelwhitford duck1123 danskarda johnbendi danieroux davidalphafox w3t-se yenda janezj

fulcro-rad-semantic-ui's Issues

Rendering glitches in form ToOnePicker

After update to the latest library I found that entity picker ToOnePicker used in form pickers changed rendering from flat to button.

Styling is a matter of personal taste, I am not complaining :-) However the change introduced visible rendering glitch on poup, where button and menu are not aligned (top-down is off by one pixel).

image

I verified also fulcro-rad-demo and found that Category is also impacted:

image

However enumerated values State or User Role on Invoice are not :

image

The reason is that while enumerated values use ui active visible searach selection dropdown, ToOnePicker wraps it with ui small menu

I found the change was introduced by @holyjak in a5fa604

fulcro-rad-semantic-ui/src/main/com/fulcrologic/rad/rendering/semantic_ui/entity_picker.cljc

Line 152 in cb3d905

(dom/div :.ui.small.menu {:style {:marginTop 0}}

I feel that explicit override of :marginTop suggests that menu element is not being used with its original intent.

Suggested solution

  • (if possible) use the same classes in ToOnePicker

Personally I find buttons in forms distracting but as I wrote, YMMV. Would you consider making ToOnePicker's class a parameter so one can turn it off? Thank you.

A custom button renderer does not default on returning nil

fulcro-rad-semantic-ui/src/main/com/fulcrologic/rad/rendering/semantic_ui/report.cljc

Line 43 in 08aad1f

(if report-row-button-renderer

The return value of report-row-button-renderer is never checked for nil here. Am I missing something?

In semantic_ui_options it states returning nil should render the default button, but it skips the render instead of falling back to default in my testing.

fulcro-rad-semantic-ui/src/main/com/fulcrologic/rad/semantic_ui_options.cljc

Line 47 in 08aad1f

(def report-row-button-renderer

Date controls problems

I've tried adding two type :instant controls to add from: and to: time based filtering to a report.

::m.job/from {:type :instant :label "From:" :style :starting-date :onChange (fn [instance v] (control/run! instance))}
::m.job/to {:type :instant :label "To:" :style :ending-date :onChange (fn [instance v] (control/run! instance))}

I've used :starting-date and :ending-date style for these controls because that seemed to make sense for such a filter control.

I've encountered three problems. When I navigate to report, the initial state of these controls is like this:

image

First thing is that the dates seem very confusing. Today is 2nd of november and the default from date looks to be after the to date. It seems weird.

The second problem is that the controls start initialized to today. This makes their use in report filtering awkward, because usually you want to start without the filter, where-as here the filter makes sure that there is 0 rows left. To see any rows, the user must first unset these controls when they enter the report.

The third problem is that the values cannot be unset. If I click the control and click Clear button, I get this error in JS console:

js-joda.js:6244 Uncaught E {message: "Text '' could not be parsed at index 0: , at index: 0", stack: "DateTimeParseException: Text '' could not be parse…ljs-runtime/com.fulcrologic.fulcro.dom.js:504:97)", parsedString: ƒ, errorIndex: ƒ, toString: ƒ}errorIndex: λ[]message: "Text '' could not be parsed at index 0: , at index: 0"parsedString: λ[]toString: λ[]stack: "DateTimeParseException: Text '' could not be parsed at index 0: , at index: 0\n    at DateTimeFormatter._parseToBuilder (http://localhost:3000/js/main/cljs-runtime/module$node_modules$js_joda$dist$js_joda.js:316:261)\n    at DateTimeFormatter.parse2 (http://localhost:3000/js/main/cljs-runtime/module$node_modules$js_joda$dist$js_joda.js:315:25)\n    at DateTimeFormatter.parse (http://localhost:3000/js/main/cljs-runtime/module$node_modules$js_joda$dist$js_joda.js:314:119)\n    at Function.LocalDate.parse (http://localhost:3000/js/main/cljs-runtime/module$node_modules$js_joda$dist$js_joda.js:429:18)\n    at Function.eval [as cljs$core$IFn$_invoke$arity$1] (http://localhost:3000/js/main/cljs-runtime/cljc.java_time.local_date.js:197:28)\n    at eval (http://localhost:3000/js/main/cljs-runtime/com.fulcrologic.rad.type_support.date_time.js:1034:80)\n    at f64405 (http://localhost:3000/js/main/cljs-runtime/com.fulcrologic.rad.type_support.date_time.js:1040:3)\n    at Object.com$fulcrologic$rad$type_support$date_time$html_date__GT_inst [as html_date__GT_inst] (http://localhost:3000/js/main/cljs-runtime/com.fulcrologic.rad.type_support.date_time.js:1044:16)\n    at eval (http://localhost:3000/js/main/cljs-runtime/com.fulcrologic.rad.rendering.semantic_ui.controls.instant_inputs.js:29:58)\n    at ctor.eval [as onChange] (http://localhost:3000/js/main/cljs-runtime/com.fulcrologic.fulcro.dom.js:504:97)"[[Prototype]]: DateTimeParseException
    at createErrorType (http://localhost:3000/js/main/cljs-runtime/module$node_modules$js_joda$dist$js_joda.js:2:85)
    at eval (http://localhost:3000/js/main/cljs-runtime/module$node_modules$js_joda$dist$js_joda.js:41:286)
    at eval (http://localhost:3000/js/main/cljs-runtime/module$node_modules$js_joda$dist$js_joda.js:1:187)
    at Object.shadow$provide.module$node_modules$js_joda$dist$js_joda (http://localhost:3000/js/main/cljs-runtime/module$node_modules$js_joda$dist$js_joda.js:1:298)
    at Object.shadow.js.jsRequire (http://localhost:3000/js/main/cljs-runtime/shadow.js.js:34:18)
    at Object.shadow.js.require (http://localhost:3000/js/main/cljs-runtime/shadow.js.js:59:20)
    at eval (http://localhost:3000/js/main/cljs-runtime/java.time.js:2:56)
    at eval (<anonymous>)
    at Object.goog.globalEval (http://localhost:3000/js/main/main.js:577:21)
    at Object.env.evalLoad (http://localhost:3000/js/main/main.js:1670:12)
DateTimeFormatter.parse2 @ js-joda.js:6244
DateTimeFormatter.parse @ js-joda.js:6219
LocalDate.parse @ js-joda.js:8510
eval @ local_date.cljc:37
eval @ date_time.cljc:330
f64405 @ date_time.cljc:330
com$fulcrologic$rad$type_support$date_time$html_date__GT_inst @ date_time.cljc:328
eval @ instant_inputs.cljc:23
eval @ dom.cljs:167
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackImpl @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4071
executeDispatch @ react-dom.development.js:8244
processDispatchQueue @ react-dom.development.js:8276
eval @ react-dom.development.js:8300
eval @ react-dom.development.js:22397
batchedEventUpdates @ react-dom.development.js:3746
dispatchEventForPluginEventSystem @ react-dom.development.js:8508
attemptToDispatchEvent @ react-dom.development.js:6006
dispatchEvent @ react-dom.development.js:5925
exports.unstable_runWithPriority @ scheduler.development.js:647
runWithPriority$1 @ react-dom.development.js:11277
Internals.Events @ react-dom.development.js:22414
dispatchDiscreteEvent @ react-dom.development.js:3757
react-dom.development.js:4092 Uncaught E {message: "Text '' could not be parsed at index 0: , at index: 0", stack: "DateTimeParseException: Text '' could not be parse…ljs-runtime/com.fulcrologic.fulcro.dom.js:504:97)", parsedString: ƒ, errorIndex: ƒ, toString: ƒ}
processDispatchQueue @ react-dom.development.js:4092
eval @ react-dom.development.js:8300
eval @ react-dom.development.js:22397
batchedEventUpdates @ react-dom.development.js:3746
dispatchEventForPluginEventSystem @ react-dom.development.js:8508
attemptToDispatchEvent @ react-dom.development.js:6006
dispatchEvent @ react-dom.development.js:5925
exports.unstable_runWithPriority @ scheduler.development.js:647
runWithPriority$1 @ react-dom.development.js:11277
Internals.Events @ react-dom.development.js:22414
dispatchDiscreteEvent @ react-dom.development.js:3757

Seems like the component cannot handle empty values.

id-child-pairs in container renderer called with wrong values

fulcro-rad-semantic-ui/src/main/com/fulcrologic/rad/rendering/semantic_ui/container.cljc

Line 85 in a60b9ee

(render-cls id cls))) (container/id-child-pairs children)))))))) 

(defn render-container-layout [container-instance]
  (let [{::container/keys [children layout]} (comp/component-options container-instance)]
    ;;; ...
-                  (render-cls id cls))) (container/id-child-pairs children))))))))
+                  (render-cls id cls))) (container/id-child-pairs container-instance))))))))

Because of this bug, the current implementation does not render anything unless co/layout is specified.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.